@rbxts-ui/components 2.1.0 → 3.0.0

package/dist/DynamicWindow/DynamicWindow.d.ts

@@ -0,0 +1,19 @@
+import React from "@rbxts/react";
+export interface ExtendableFrameProps extends React.PropsWithChildren {
+    readonly size?: UDim2 | React.Binding<UDim2>;
+    readonly position?: UDim2 | React.Binding<UDim2>;
+    readonly backgroundColor?: Color3 | React.Binding<Color3>;
+    readonly backgroundTransparency?: number | React.Binding<number>;
+    readonly clipsDescendants?: boolean | React.Binding<boolean>;
+    readonly initialSize?: UDim2;
+    readonly initialPosition?: UDim2;
+    readonly title?: string;
+    readonly onClose?: () => void;
+    readonly onPositionChange?: (position: UDim2) => void;
+    readonly onSizeChange?: (size: UDim2) => void;
+    readonly active?: boolean;
+    readonly zIndex?: number;
+    readonly resizeEnabled?: boolean;
+}
+export declare function DynamicWindow({ children, size, position, backgroundColor, backgroundTransparency, clipsDescendants, initialSize, initialPosition, title, resizeEnabled, onClose, onPositionChange, onSizeChange, active, zIndex, }: ExtendableFrameProps): JSX.Element;
+//# sourceMappingURL=DynamicWindow.d.ts.map

package/dist/DynamicWindow/DynamicWindow.luau

@@ -0,0 +1,327 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local useEventListener = _pretty_react_hooks.useEventListener
+local useLatest = _pretty_react_hooks.useLatest
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useBinding = _react.useBinding
+local useRef = _react.useRef
+local useState = _react.useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
+local Divider = TS.import(script, script.Parent.Parent, "layout", "Divider").Divider
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local _DynamicWindow_utils = TS.import(script, script.Parent, "DynamicWindow.utils")
+local getInputViewportPos = _DynamicWindow_utils.getInputViewportPos
+local getMouseViewportPos = _DynamicWindow_utils.getMouseViewportPos
+local ResizeCornerButton = TS.import(script, script.Parent, "ResizeCornerButton").ResizeCornerButton
+local TrafficLightButton = TS.import(script, script.Parent, "TrafficLightButton").TrafficLightButton
+local ROBLOX_TOOLBAR_HEIGHT = 68
+local function DynamicWindow(_param)
+	local children = _param.children
+	local size = _param.size
+	local position = _param.position
+	local backgroundColor = _param.backgroundColor
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 0
+	end
+	local clipsDescendants = _param.clipsDescendants
+	if clipsDescendants == nil then
+		clipsDescendants = true
+	end
+	local initialSize = _param.initialSize
+	local initialPosition = _param.initialPosition
+	local title = _param.title
+	if title == nil then
+		title = "Workspace"
+	end
+	local resizeEnabled = _param.resizeEnabled
+	if resizeEnabled == nil then
+		resizeEnabled = true
+	end
+	local onClose = _param.onClose
+	local onPositionChange = _param.onPositionChange
+	local onSizeChange = _param.onSizeChange
+	local active = _param.active
+	local zIndex = _param.zIndex
+	local rem = useRem()
+	local theme = defaultTheme
+	local titleBarHeight = rem(7)
+	local titleBarPadding = rem(1)
+	local trafficLightSize = rem(2.5)
+	local titleFontSize = rem(3.2)
+	local titleBarColor = theme.palette.lightblue
+	local corner = UDim.new(0, rem(1.5))
+	-- Defaults: fixed offset size/position so move/resize make sense immediately
+	local fallbackPosition = UDim2.new(0, 0, 0, ROBLOX_TOOLBAR_HEIGHT)
+	local fallbackSize = UDim2.new(0, rem(30), 1, -ROBLOX_TOOLBAR_HEIGHT)
+	local defaultPosition = initialPosition or fallbackPosition
+	local defaultSize = initialSize or fallbackSize
+	local internalPositionBinding, setInternalPosition = useBinding(defaultPosition)
+	local internalSizeBinding, setInternalSize = useBinding(defaultSize)
+	local positionBinding = position or internalPositionBinding
+	local sizeBinding = size or internalSizeBinding
+	local mode, setMode = useState("none")
+	local modeRef = useLatest(mode)
+	local minimized, setMinimized = useState(false)
+	local prevSizeRef = useRef()
+	local dragRef = useRef()
+	local frameRef = useRef(nil)
+	local applyInternalPosition = function(positionValue)
+		setInternalPosition(positionValue)
+		local _result = onPositionChange
+		if _result ~= nil then
+			_result(positionValue)
+		end
+	end
+	local applyInternalSize = function(sizeValue)
+		setInternalSize(sizeValue)
+		local _result = onSizeChange
+		if _result ~= nil then
+			_result(sizeValue)
+		end
+	end
+	local startInteraction = function(nextMode, mousePos, resizeCorner)
+		if nextMode == "resize" and (minimized or not resizeEnabled) then
+			return nil
+		end
+		local frame = frameRef.current
+		if not frame then
+			return nil
+		end
+		dragRef.current = {
+			startMouse = mousePos,
+			startPos = frame.Position,
+			startSize = frame.Size,
+			startAbsSize = frame.AbsoluteSize,
+			startAbsPos = frame.AbsolutePosition,
+			resizeCorner = resizeCorner,
+		}
+		setMode(nextMode)
+	end
+	local onDrag
+	local stopInteraction = function(commitPosition)
+		if commitPosition and dragRef.current then
+			onDrag(commitPosition)
+		end
+		dragRef.current = nil
+		if modeRef.current ~= "none" then
+			setMode("none")
+		end
+	end
+	useEventListener(UserInputService.InputChanged, function(input)
+		if modeRef.current == "none" then
+			return nil
+		end
+		if not dragRef.current then
+			return nil
+		end
+		if input.UserInputType ~= Enum.UserInputType.MouseMovement then
+			return nil
+		end
+		onDrag(getInputViewportPos(input))
+	end)
+	useEventListener(UserInputService.InputEnded, function(input)
+		if modeRef.current ~= "none" and input.UserInputType == Enum.UserInputType.MouseButton1 then
+			stopInteraction(getInputViewportPos(input))
+		end
+	end)
+	onDrag = function(mousePos)
+		local drag = dragRef.current
+		if not drag then
+			return nil
+		end
+		local _mousePos = mousePos
+		local _startMouse = drag.startMouse
+		local delta = _mousePos - _startMouse
+		local currentMode = modeRef.current
+		if currentMode == "move" then
+			local nextPos = UDim2.new(drag.startPos.X.Scale, drag.startPos.X.Offset + delta.X, drag.startPos.Y.Scale, drag.startPos.Y.Offset + delta.Y)
+			applyInternalPosition(nextPos)
+		elseif currentMode == "resize" then
+			if minimized then
+				return nil
+			end
+			local resizeCorner = drag.resizeCorner or "bottomRight"
+			local minW = rem(24)
+			local minH = titleBarHeight + rem(6)
+			local currentAbsSize = drag.startAbsSize
+			local isLeft = resizeCorner == "topLeft" or resizeCorner == "bottomLeft"
+			local isTop = resizeCorner == "topLeft" or resizeCorner == "topRight"
+			local desiredAbsW = currentAbsSize.X + (if isLeft then -delta.X else delta.X)
+			local desiredAbsH = currentAbsSize.Y + (if isTop then -delta.Y else delta.Y)
+			local finalAbsW = math.max(minW, desiredAbsW)
+			local finalAbsH = math.max(minH, desiredAbsH)
+			local usedDeltaX = finalAbsW - currentAbsSize.X
+			local usedDeltaY = finalAbsH - currentAbsSize.Y
+			local nextSize = UDim2.new(drag.startSize.X.Scale, drag.startSize.X.Offset + usedDeltaX, drag.startSize.Y.Scale, drag.startSize.Y.Offset + usedDeltaY)
+			applyInternalSize(nextSize)
+			if isLeft or isTop then
+				local nextPos = drag.startPos
+				if isLeft then
+					local positionDeltaX = currentAbsSize.X - finalAbsW
+					nextPos = UDim2.new(nextPos.X.Scale, nextPos.X.Offset + positionDeltaX, nextPos.Y.Scale, nextPos.Y.Offset)
+				end
+				if isTop then
+					local positionDeltaY = currentAbsSize.Y - finalAbsH
+					nextPos = UDim2.new(nextPos.X.Scale, nextPos.X.Offset, nextPos.Y.Scale, nextPos.Y.Offset + positionDeltaY)
+				end
+				applyInternalPosition(nextPos)
+			end
+		end
+	end
+	local toggleMinimize = function()
+		stopInteraction()
+		if not minimized then
+			local currentSize = internalSizeBinding:getValue()
+			prevSizeRef.current = currentSize
+			local collapsed = UDim2.new(currentSize.X.Scale, currentSize.X.Offset, 0, titleBarHeight)
+			applyInternalSize(collapsed)
+			setMinimized(true)
+		else
+			local prev = prevSizeRef.current
+			if prev then
+				applyInternalSize(prev)
+			end
+			setMinimized(false)
+		end
+	end
+	local handleClose = function()
+		stopInteraction()
+		local _result = onClose
+		if _result ~= nil then
+			_result()
+		end
+	end
+	local maximize = function()
+		applyInternalSize(UDim2.new(1, 0, 1, -ROBLOX_TOOLBAR_HEIGHT))
+		applyInternalPosition(UDim2.new(0, 0, 0, ROBLOX_TOOLBAR_HEIGHT))
+	end
+	local commonResizeCornerProps = {
+		size = rem(2.5),
+		startInteraction = startInteraction,
+		stopInteraction = stopInteraction,
+		visible = resizeEnabled and not minimized,
+	}
+	local defaultBackgroundColor = backgroundColor or theme.palette.white
+	local _exp = React.createElement("uistroke", {
+		Color = theme.palette.offwhite,
+		Transparency = 0.5,
+		Thickness = 1,
+	}, children)
+	local _exp_1 = React.createElement(Button, {
+		backgroundColor = titleBarColor,
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, titleBarHeight),
+		event = {
+			MouseButton1Down = function()
+				startInteraction("move", getMouseViewportPos())
+			end,
+			MouseButton1Up = function()
+				stopInteraction(getMouseViewportPos())
+			end,
+		},
+	}, React.createElement("uicorner", {
+		CornerRadius = corner,
+	}), React.createElement(Padding, {
+		padding = titleBarPadding,
+	}), React.createElement(HStack, {
+		size = UDim2.new(0.2, 0, 1, 0),
+		backgroundTransparency = 1,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		horizontalAlignment = Enum.HorizontalAlignment.Left,
+		spacing = rem(0.75),
+	}, React.createElement(TrafficLightButton, {
+		color = theme.palette.macRed,
+		size = trafficLightSize,
+		onClick = handleClose,
+	}), resizeEnabled and (React.createElement(React.Fragment, nil, React.createElement(TrafficLightButton, {
+		color = theme.palette.macYellow,
+		size = trafficLightSize,
+		onClick = toggleMinimize,
+	}), React.createElement(TrafficLightButton, {
+		color = theme.palette.macGreen,
+		size = trafficLightSize,
+		onClick = maximize,
+	})))), React.createElement(Text, {
+		text = title,
+		textSize = titleFontSize,
+		textColor = theme.palette.crust,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+	}))
+	local _exp_2 = React.createElement(Divider, {
+		zIndex = 2,
+		position = UDim2.new(0, 0, 0, titleBarHeight),
+		color = theme.palette.offwhite,
+		thickness = 1,
+	})
+	local _exp_3 = React.createElement(Frame, {
+		size = UDim2.new(1, 0, 1, -titleBarHeight),
+		position = UDim2.new(0, 0, 0, titleBarHeight),
+		backgroundTransparency = 1,
+		visible = not minimized,
+		zIndex = 1,
+	}, children)
+	local _attributes = {
+		handleCorner = "topLeft",
+		anchorPoint = Vector2.new(0, 0),
+		position = UDim2.new(0, 0, 0, 0),
+	}
+	for _k, _v in commonResizeCornerProps do
+		_attributes[_k] = _v
+	end
+	local _exp_4 = React.createElement(ResizeCornerButton, _attributes)
+	local _attributes_1 = {
+		handleCorner = "topRight",
+		anchorPoint = Vector2.new(1, 0),
+		position = UDim2.new(1, 0, 0, 0),
+	}
+	for _k, _v in commonResizeCornerProps do
+		_attributes_1[_k] = _v
+	end
+	local _exp_5 = React.createElement(ResizeCornerButton, _attributes_1)
+	local _attributes_2 = {
+		handleCorner = "bottomLeft",
+		anchorPoint = Vector2.new(0, 1),
+		position = UDim2.new(0, 0, 1, 0),
+	}
+	for _k, _v in commonResizeCornerProps do
+		_attributes_2[_k] = _v
+	end
+	local _exp_6 = React.createElement(ResizeCornerButton, _attributes_2)
+	local _attributes_3 = {
+		handleCorner = "bottomRight",
+		anchorPoint = Vector2.new(1, 1),
+		position = UDim2.new(1, 0, 1, 0),
+	}
+	for _k, _v in commonResizeCornerProps do
+		_attributes_3[_k] = _v
+	end
+	return React.createElement(Frame, {
+		ref = frameRef,
+		size = sizeBinding,
+		position = positionBinding,
+		clipsDescendants = false,
+		active = active,
+		zIndex = zIndex,
+	}, React.createElement(Frame, {
+		size = UDim2.new(1, 0, 1, 0),
+		backgroundTransparency = backgroundTransparency,
+		backgroundColor = defaultBackgroundColor,
+		cornerRadius = corner,
+		clipsDescendants = clipsDescendants,
+		active = active,
+	}, _exp, _exp_1, _exp_2, _exp_3, _exp_4, _exp_5, _exp_6, React.createElement(ResizeCornerButton, _attributes_3)))
+end
+return {
+	DynamicWindow = DynamicWindow,
+}

package/dist/DynamicWindow/DynamicWindow.utils.d.ts

@@ -0,0 +1,13 @@
+export type ResizeCorner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type Mode = "none" | "move" | "resize";
+export declare const toViewportPoint: (pos: Vector2) => Vector2;
+export declare const getInputViewportPos: (input: InputObject) => Vector2;
+export declare const getMouseViewportPos: () => Vector2;
+export interface WindowSpawnOptions {
+    readonly size: Vector2;
+    readonly preferredPosition?: Vector2;
+    readonly fallbackInstance?: GuiObject;
+}
+export declare const clampViewportPosition: (position: Vector2, size: Vector2) => Vector2;
+export declare const resolveWindowSpawnPosition: ({ size, preferredPosition, fallbackInstance }: WindowSpawnOptions) => UDim2;
+//# sourceMappingURL=DynamicWindow.utils.d.ts.map

package/dist/DynamicWindow/DynamicWindow.utils.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
+local GuiService = _services.GuiService
+local UserInputService = _services.UserInputService
+local Workspace = _services.Workspace
+local toViewportPoint = function(pos)
+	local inset = GuiService:GetGuiInset()
+	return Vector2.new(pos.X - inset.X, pos.Y - inset.Y)
+end
+local getInputViewportPos = function(input)
+	return Vector2.new(input.Position.X, input.Position.Y)
+end
+local getMouseViewportPos = function()
+	return toViewportPoint(UserInputService:GetMouseLocation())
+end
+local clampViewportPosition = function(position, size)
+	local camera = Workspace.CurrentCamera
+	if not camera then
+		return position
+	end
+	local viewportSize = camera.ViewportSize
+	local maxX = math.max(0, viewportSize.X - size.X)
+	local maxY = math.max(0, viewportSize.Y - size.Y)
+	return Vector2.new(math.clamp(position.X, 0, maxX), math.clamp(position.Y, 0, maxY))
+end
+local resolveWindowSpawnPosition = function(_param)
+	local size = _param.size
+	local preferredPosition = _param.preferredPosition
+	local fallbackInstance = _param.fallbackInstance
+	local _fallbackPos = fallbackInstance
+	if _fallbackPos ~= nil then
+		_fallbackPos = _fallbackPos.AbsolutePosition
+	end
+	local fallbackPos = _fallbackPos
+	local basePosition = preferredPosition or fallbackPos or Vector2.zero
+	local clamped = clampViewportPosition(basePosition, size)
+	return UDim2.new(0, clamped.X, 0, clamped.Y)
+end
+return {
+	toViewportPoint = toViewportPoint,
+	getInputViewportPos = getInputViewportPos,
+	getMouseViewportPos = getMouseViewportPos,
+	clampViewportPosition = clampViewportPosition,
+	resolveWindowSpawnPosition = resolveWindowSpawnPosition,
+}

package/dist/DynamicWindow/ResizeCornerButton.d.ts

@@ -0,0 +1,13 @@
+import { Mode, ResizeCorner } from "./DynamicWindow.utils";
+interface ResizeCornerButtonProps {
+    readonly size: number;
+    readonly handleCorner: ResizeCorner;
+    readonly anchorPoint: Vector2;
+    readonly position: UDim2;
+    startInteraction: (mode: Mode, mousePos: Vector2, handleCorner?: ResizeCorner) => void;
+    stopInteraction: (mousePos: Vector2) => void;
+    readonly visible: boolean;
+}
+export declare function ResizeCornerButton({ size, handleCorner, anchorPoint, position, startInteraction, stopInteraction, visible, }: ResizeCornerButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=ResizeCornerButton.d.ts.map

package/dist/DynamicWindow/ResizeCornerButton.luau

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
+local getMouseViewportPos = TS.import(script, script.Parent, "DynamicWindow.utils").getMouseViewportPos
+local function ResizeCornerButton(_param)
+	local size = _param.size
+	local handleCorner = _param.handleCorner
+	local anchorPoint = _param.anchorPoint
+	local position = _param.position
+	local startInteraction = _param.startInteraction
+	local stopInteraction = _param.stopInteraction
+	local visible = _param.visible
+	local rem = useRem()
+	local theme = defaultTheme
+	local isHovering, setIsHovering = React.useState(false)
+	local handleMouseEnter = function()
+		return setIsHovering(true)
+	end
+	local handleMouseLeave = function()
+		return setIsHovering(false)
+	end
+	return React.createElement(Button, {
+		key = handleCorner,
+		size = UDim2.new(0, size, 0, size),
+		position = position,
+		anchorPoint = anchorPoint,
+		visible = visible,
+		backgroundColor = theme.palette.surface2,
+		backgroundTransparency = if isHovering then 0.65 else 1,
+		cornerRadius = UDim.new(0, rem(1.5)),
+		selectable = false,
+		onMouseEnter = handleMouseEnter,
+		onMouseLeave = handleMouseLeave,
+		onMouseDown = function()
+			startInteraction("resize", getMouseViewportPos(), handleCorner)
+		end,
+		onMouseUp = function()
+			stopInteraction(getMouseViewportPos())
+		end,
+	})
+end
+return {
+	ResizeCornerButton = ResizeCornerButton,
+}

package/dist/DynamicWindow/TrafficLightButton.d.ts

@@ -0,0 +1,8 @@
+interface TrafficLightButtonProps {
+    readonly size: number;
+    readonly color: Color3;
+    readonly onClick: () => void;
+}
+export declare function TrafficLightButton({ color, size, onClick }: TrafficLightButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=TrafficLightButton.d.ts.map

package/dist/DynamicWindow/TrafficLightButton.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local function TrafficLightButton(_param)
+	local color = _param.color
+	local size = _param.size
+	local onClick = _param.onClick
+	return React.createElement("imagebutton", {
+		BackgroundColor3 = color,
+		BackgroundTransparency = 0,
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Selectable = false,
+		Size = UDim2.new(0, size, 0, size),
+		Event = if onClick then {
+			MouseButton1Click = function()
+				onClick()
+			end,
+		} else nil,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(1, 0),
+	}))
+end
+return {
+	TrafficLightButton = TrafficLightButton,
+}

package/dist/{DropdownButton.d.ts → buttons/DropdownButton.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface DropdownButtonProps extends React.PropsWithChildren {
     readonly text: string;
     readonly onClick?: () => void;
@@ -15,8 +14,7 @@ interface DropdownButtonProps extends React.PropsWithChildren {
     readonly hasShadow?: boolean;
     readonly padding?: number;
     readonly radius?: number;
-    readonly theme?: Theme;
 }
-export declare function DropdownButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, isDisabled, size, padding, radius, theme, }: DropdownButtonProps): JSX.Element;
+export declare function DropdownButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, isDisabled, size, padding, radius, }: DropdownButtonProps): JSX.Element;
 export type { DropdownButtonProps };
 //# sourceMappingURL=DropdownButton.d.ts.map

package/dist/{DropdownButton.luau → buttons/DropdownButton.luau}

@@ -4,12 +4,12 @@ local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pr
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local Outline = TS.import(script, script.Parent, "Outline").Outline
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function DropdownButton(_param)
 	local text = _param.text
 	local onClick = _param.onClick
@@ -21,10 +21,7 @@ local function DropdownButton(_param)
 	local size = _param.size
 	local padding = _param.padding
 	local radius = _param.radius
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local textColor = theme.palette.crust
@@ -51,7 +48,6 @@ local function DropdownButton(_param)
 		outerColor = theme.palette.white,
 		outerTransparency = 0,
 		outerThickness = 1,
-		theme = theme,
 	})
 	local _attributes = {
 		key = "mainText",
@@ -103,7 +99,6 @@ local function DropdownButton(_param)
 		size = size or UDim2.new(0, rem(10), 0, rem(4)),
 		position = position,
 		layoutOrder = layoutOrder,
-		theme = theme,
 	}, _exp, _exp_1, _exp_2, React.createElement(Text, _attributes_1))
 end
 return {

package/dist/{DropdownOptionButton.d.ts → buttons/DropdownOptionButton.d.ts}

@@ -1,13 +1,11 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface DropdownOptionButtonProps extends React.PropsWithChildren {
     readonly text: string;
     readonly onClick?: () => void;
     readonly onHover?: (hovered: boolean) => void;
     readonly size?: UDim2;
     readonly padding?: number;
-    readonly theme?: Theme;
 }
-export declare function DropdownOptionButton({ text, onClick, onHover, size, padding, children, theme, }: DropdownOptionButtonProps): JSX.Element;
+export declare function DropdownOptionButton({ text, onClick, onHover, size, padding, children, }: DropdownOptionButtonProps): JSX.Element;
 export type { DropdownOptionButtonProps };
 //# sourceMappingURL=DropdownOptionButton.d.ts.map

package/dist/{DropdownOptionButton.luau → buttons/DropdownOptionButton.luau}

@@ -4,11 +4,11 @@ local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pr
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function DropdownOptionButton(_param)
 	local text = _param.text
 	local onClick = _param.onClick
@@ -16,10 +16,7 @@ local function DropdownOptionButton(_param)
 	local size = _param.size
 	local padding = _param.padding
 	local children = _param.children
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local textColor = theme.palette.crust
@@ -62,7 +59,6 @@ local function DropdownOptionButton(_param)
 		end,
 		backgroundTransparency = 1,
 		size = size or UDim2.new(0, rem(10), 0, rem(4)),
-		theme = theme,
 	}, _exp, _result)
 end
 return {

package/dist/{IconRoundButton.d.ts → buttons/IconRoundButton.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface IconRoundButtonProps {
     readonly onClick?: () => void;
     readonly emoji?: string;
@@ -16,8 +15,7 @@ interface IconRoundButtonProps {
     readonly position?: UDim2;
     readonly onMouseDown?: () => void;
     readonly onMouseUp?: () => void;
-    readonly theme?: Theme;
 }
-export declare function IconRoundButton({ onClick, emoji, label, primaryColor, enabled, order, circleSize, width, addShadow, emojiSize, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, theme, }: IconRoundButtonProps): JSX.Element;
+export declare function IconRoundButton({ onClick, emoji, label, primaryColor, enabled, order, circleSize, width, addShadow, emojiSize, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, }: IconRoundButtonProps): JSX.Element;
 export type { IconRoundButtonProps };
 //# sourceMappingURL=IconRoundButton.d.ts.map

package/dist/{IconRoundButton.luau → buttons/IconRoundButton.luau}

@@ -4,16 +4,16 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local Group = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Group
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
 local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
 local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
-local Padding = TS.import(script, script.Parent, "Padding").Padding
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
 local Transition = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).Transition
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local MARGIN_Y = 0
 local PADDING_LEFT = 2
 local PADDING_RIGHT = 2
@@ -46,10 +46,7 @@ local function IconRoundButton(_param)
 	local position = _param.position
 	local onMouseDown = _param.onMouseDown
 	local onMouseUp = _param.onMouseUp
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local CIRCLE_SIZE = circleSize
 	local EMOJI_SIZE = CIRCLE_SIZE / emojiSize
@@ -97,7 +94,6 @@ local function IconRoundButton(_param)
 		position = position,
 		onMouseDown = onMouseDown,
 		onMouseUp = onMouseUp,
-		theme = theme,
 	}, React.createElement(Transition, {
 		groupTransparency = transparency,
 		size = UDim2.new(1, 0, 1, rem(2 * MARGIN_Y)),