@rbxts-ui/components 2.1.0 → 3.1.0

package/dist/{Checkbox.luau → form/Checkbox.luau}

@@ -6,12 +6,12 @@ local useMotion = _pretty_react_hooks.useMotion
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useMemo = _react.useMemo
-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 ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "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 Checkbox(_param)
 	local checked = _param.checked
 	local onChecked = _param.onChecked
@@ -25,10 +25,7 @@ local function Checkbox(_param)
 	if disabled == nil then
 		disabled = false
 	end
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
@@ -59,7 +56,6 @@ local function Checkbox(_param)
 		onHover = function(hovered)
 			return hoverMotion:spring(if hovered then 1 else 0)
 		end,
-		theme = theme,
 	}, React.createElement("uilistlayout", {
 		FillDirection = "Horizontal",
 		VerticalAlignment = "Center",
@@ -82,7 +78,6 @@ local function Checkbox(_param)
 		innerTransparency = 0,
 		outerTransparency = 1,
 		innerThickness = 2,
-		theme = theme,
 	}), React.createElement(Text, {
 		text = if checked then "✔" else "",
 		textColor = mainColor,

package/dist/{CheckboxRow.d.ts → form/CheckboxRow.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface CheckboxRowProps {
     label: string;
     checked: boolean;
@@ -7,8 +6,7 @@ interface CheckboxRowProps {
     disabled?: boolean;
     name?: string;
     children?: React.ReactNode;
-    theme?: Theme;
 }
-export declare function CheckboxRow({ label, checked, onChecked, disabled, name, children, theme, }: CheckboxRowProps): JSX.Element;
+export declare function CheckboxRow({ label, checked, onChecked, disabled, name, children, }: CheckboxRowProps): JSX.Element;
 export type { CheckboxRowProps };
 //# sourceMappingURL=CheckboxRow.d.ts.map

package/dist/{CheckboxRow.luau → form/CheckboxRow.luau}

@@ -1,12 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 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 Checkbox = TS.import(script, script.Parent, "Checkbox").Checkbox
-local Button = TS.import(script, script.Parent, "Button").Button
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
 local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
 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 CheckboxRow(_param)
 	local label = _param.label
 	local checked = _param.checked
@@ -17,10 +17,7 @@ local function CheckboxRow(_param)
 	end
 	local name = _param.name
 	local children = _param.children
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local textSize = rem(3)
 	return React.createElement(HStack, {
@@ -33,7 +30,6 @@ local function CheckboxRow(_param)
 		variant = "large",
 		onChecked = onChecked,
 		disabled = disabled,
-		theme = theme,
 	}), React.createElement(Button, {
 		backgroundTransparency = 1,
 		size = UDim2.new(1, 0, 0, rem(4)),

package/dist/{Dropdown.d.ts → form/Dropdown.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface DropdownOption<T> {
     label: string;
     value: T;
@@ -11,7 +10,6 @@ interface DropdownProps<T> {
     size?: UDim2;
     renderOption?: (option: DropdownOption<T>) => React.ReactNode;
     portalRef?: React.RefObject<GuiObject>;
-    theme?: Theme;
 }
 export declare function Dropdown<T>(props: DropdownProps<T>): JSX.Element;
 export type { DropdownOption, DropdownProps };

package/dist/{Dropdown.luau → form/Dropdown.luau}

@@ -2,17 +2,17 @@
 local TS = _G[script]
 local VStackScrolling = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStackScrolling
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-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 defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
 local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
-local ClickOutsideLayer = TS.import(script, script.Parent, "ClickOutsideOverlay").ClickOutsideLayer
-local DropdownButton = TS.import(script, script.Parent, "DropdownButton").DropdownButton
-local DropdownOptionButton = TS.import(script, script.Parent, "DropdownOptionButton").DropdownOptionButton
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local DropdownButton = TS.import(script, script.Parent.Parent, "buttons", "DropdownButton").DropdownButton
+local DropdownOptionButton = TS.import(script, script.Parent.Parent, "buttons", "DropdownOptionButton").DropdownOptionButton
+local ClickOutsideLayer = TS.import(script, script.Parent.Parent, "utils", "ClickOutsideOverlay").ClickOutsideLayer
 local function Dropdown(props)
 	local _binding = props
 	local options = _binding.options
@@ -21,10 +21,7 @@ local function Dropdown(props)
 	local size = _binding.size
 	local renderOption = _binding.renderOption
 	local portalRef = _binding.portalRef
-	local theme = _binding.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local isOpen, setIsOpen = useState(false)
 	local dropdownBounds, setDropdownBounds = useState()
 	local dropdownRef = useRef()
@@ -89,7 +86,6 @@ local function Dropdown(props)
 					onChange(option.value)
 					setIsOpen(false)
 				end,
-				theme = theme,
 			}, if renderOption then renderOption(option) else nil)
 		end
 		for _k, _v in options do
@@ -109,7 +105,7 @@ local function Dropdown(props)
 		end
 		local container = _container
 		if not container then
-			error("Dropdown requires a portalRef prop or a PortalProvider with an active portalRef")
+			return nil
 		end
 		if not dropdownBounds then
 			return nil
@@ -146,7 +142,6 @@ local function Dropdown(props)
 	_attributes.onClick = function()
 		return setIsOpen(not isOpen)
 	end
-	_attributes.theme = theme
 	return React.createElement(Frame, {
 		backgroundTransparency = 1,
 		size = frameSize,

package/dist/form/DropdownRow.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+interface DropdownRowProps<T> {
+    label: string;
+    value?: T;
+    options: Array<{
+        label: string;
+        value: T;
+    }>;
+    onChange: (value: T) => void;
+    renderOption?: (option: {
+        label: string;
+        value: T;
+    }) => React.ReactNode;
+    portalRef?: React.RefObject<GuiObject>;
+}
+export declare function DropdownRow<T>({ label, value, options, onChange, renderOption, portalRef }: DropdownRowProps<T>): JSX.Element;
+export type { DropdownRowProps };
+//# sourceMappingURL=DropdownRow.d.ts.map

package/dist/form/DropdownRow.luau

@@ -0,0 +1,28 @@
+-- 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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Dropdown = TS.import(script, script.Parent, "Dropdown").Dropdown
+local FormRow = TS.import(script, script.Parent, "FormRow").FormRow
+local function DropdownRow(_param)
+	local label = _param.label
+	local value = _param.value
+	local options = _param.options
+	local onChange = _param.onChange
+	local renderOption = _param.renderOption
+	local portalRef = _param.portalRef
+	local rem = useRem()
+	return React.createElement(FormRow, {
+		label = label,
+	}, React.createElement(Dropdown, {
+		options = options,
+		value = value,
+		onChange = onChange,
+		size = UDim2.new(1, 0, 0, rem(5)),
+		renderOption = renderOption,
+		portalRef = portalRef,
+	}))
+end
+return {
+	DropdownRow = DropdownRow,
+}

package/dist/form/FormRow.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+interface FormRowProps {
+    label: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export declare function FormRow({ label, children, disabled }: FormRowProps): JSX.Element;
+export type { FormRowProps };
+//# sourceMappingURL=FormRow.d.ts.map

package/dist/{FormRow.luau → form/FormRow.luau}

@@ -1,19 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 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 HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
 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 INPUT_HEIGHT = 5
 local function FormRow(_param)
 	local label = _param.label
 	local children = _param.children
 	local disabled = _param.disabled
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local textSize = rem(3)
 	local labelWidth = rem(20)

package/dist/form/InputRound.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+interface InputRoundProps {
+    readonly onClick?: () => void;
+    readonly emoji: string;
+    readonly placeholderText: string;
+    readonly value: string;
+    readonly primary: Color3;
+    readonly order: number;
+    readonly width?: number;
+    readonly height?: number;
+    readonly children?: React.ReactNode;
+    readonly onTextChanged?: (text: string) => void;
+    readonly debounceDelay?: number;
+    readonly disabled?: boolean;
+}
+export declare const InputRound: React.ForwardRefExoticComponent<InputRoundProps & React.RefAttributes<TextBox>>;
+export type { InputRoundProps };
+//# sourceMappingURL=InputRound.d.ts.map

package/dist/form/InputRound.luau

@@ -0,0 +1,218 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local TextField = TS.import(script, script.Parent, "TextField").TextField
+local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
+local HStack = _layout.HStack
+local VStack = _layout.VStack
+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 Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local RoundEmoji = TS.import(script, script.Parent, "RoundEmoji").RoundEmoji
+-- Default debounce delay in seconds
+local DEFAULT_DEBOUNCE_DELAY = 0.3
+local MARGIN_Y = 0
+local PADDING_LEFT = 0.5
+local PADDING_RIGHT = 2
+local INTERNAL_PADDING = 1
+local InputRound = forwardRef(function(props, ref)
+	local _binding = props
+	local onClick = _binding.onClick
+	local emoji = _binding.emoji
+	local placeholderText = _binding.placeholderText
+	local value = _binding.value
+	local primary = _binding.primary
+	local order = _binding.order
+	local width = _binding.width
+	local height = _binding.height
+	if height == nil then
+		height = 4
+	end
+	local children = _binding.children
+	local onTextChanged = _binding.onTextChanged
+	local debounceDelay = _binding.debounceDelay
+	if debounceDelay == nil then
+		debounceDelay = DEFAULT_DEBOUNCE_DELAY
+	end
+	local disabled = _binding.disabled
+	local hover, hoverMotion = useMotion(0)
+	local rem = useRem()
+	local theme = defaultTheme
+	-- Only use a single local state that updates immediately
+	local inputValue, setInputValue = useState(value)
+	local validationError, setValidationError = useState(nil)
+	local internalRef = useRef()
+	local debounceTimer = useRef(nil)
+	local isUserInput = useRef(false)
+	-- Use forwarded ref or internal ref
+	local actualRef = ref or internalRef
+	-- Clear any existing debounce timer
+	local clearDebounce = function()
+		if debounceTimer.current then
+			task.cancel(debounceTimer.current)
+			debounceTimer.current = nil
+		end
+	end
+	-- Handle value changes (including resets)
+	useEffect(function()
+		-- Skip if this is coming from user input (handled by debounce)
+		if isUserInput.current then
+			return nil
+		end
+		-- Clear any existing debounce timer
+		clearDebounce()
+		-- Update input value immediately
+		setInputValue(value)
+		-- Directly update TextBox if available
+		local currentTextBox = actualRef.current
+		if currentTextBox then
+			currentTextBox.Text = value
+		end
+		-- Clear validation errors
+		setValidationError(nil)
+	end, { value })
+	-- Function to handle debounced validation
+	local debouncedValidate = function(text)
+		clearDebounce()
+		debounceTimer.current = task.delay(debounceDelay, function()
+			if onTextChanged then
+				local err = onTextChanged(text)
+				if err ~= nil then
+					setValidationError(err)
+				else
+					setValidationError(nil)
+				end
+			end
+			debounceTimer.current = nil
+		end)
+	end
+	-- Cleanup debounce timer on unmount
+	useEffect(function()
+		return function()
+			clearDebounce()
+		end
+	end, {})
+	local fullRound = UDim.new(1, 0)
+	local HEIGHT = PADDING_LEFT * 2 + height
+	-- Handle text box changes
+	useEffect(function()
+		local currentTextBox = actualRef.current
+		if not currentTextBox then
+			return nil
+		end
+		local connection = currentTextBox:GetPropertyChangedSignal("Text"):Connect(function()
+			local _result = currentTextBox
+			if _result ~= nil then
+				_result = _result.Text
+			end
+			local _condition = _result
+			if _condition == nil then
+				_condition = ""
+			end
+			local newText = _condition
+			-- Flag this as a user input
+			isUserInput.current = true
+			-- Update UI immediately
+			setInputValue(newText)
+			-- Schedule validation with debounce
+			debouncedValidate(newText)
+			-- Reset the flag after this event cycle
+			task.defer(function()
+				isUserInput.current = false
+			end)
+		end)
+		return function()
+			connection:Disconnect()
+		end
+	end, { actualRef.current })
+	local _attributes = {}
+	local _condition = width
+	if _condition == nil then
+		_condition = 1
+	end
+	_attributes.size = UDim2.new(_condition, 0, 1, 0)
+	_attributes.automaticSize = Enum.AutomaticSize.Y
+	_attributes.spacing = rem(0.5)
+	return React.createElement(VStack, _attributes, React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(HEIGHT)),
+		layoutOrder = order,
+		event = {
+			MouseEnter = function()
+				return hoverMotion:spring(1)
+			end,
+			MouseLeave = function()
+				return hoverMotion:spring(0)
+			end,
+		},
+	}, React.createElement(Padding, {
+		paddingY = rem(MARGIN_Y),
+	}), React.createElement(Frame, {
+		backgroundTransparency = 0,
+		backgroundColor = theme.palette.white,
+		cornerRadius = fullRound,
+		size = UDim2.new(1, 0, 1, 0),
+	}), React.createElement(Outline, {
+		cornerRadius = fullRound,
+		innerColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		innerTransparency = 0,
+		outerColor = theme.palette.white,
+		outerTransparency = 0,
+		outerThickness = 1,
+	}), React.createElement(HStack, {
+		spacing = rem(INTERNAL_PADDING),
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, rem(PADDING_LEFT)),
+		PaddingRight = UDim.new(0, rem(PADDING_RIGHT)),
+	}), React.createElement(RoundEmoji, {
+		emoji = emoji,
+		primary = primary,
+		height = height,
+	}), React.createElement(TextField, {
+		ref = ref or internalRef,
+		font = theme.fonts.inter.medium,
+		text = inputValue,
+		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		textTransparency = 0.05,
+		textSize = rem(3.5),
+		textXAlignment = "Left",
+		textYAlignment = "Center",
+		size = UDim2.new(1, -rem(height), 1, 0),
+		clearTextOnFocus = false,
+		placeholderText = placeholderText,
+		textEditable = not disabled,
+		event = {
+			FocusLost = function(rbx, enterPressed)
+				if enterPressed then
+					local _result = onClick
+					if _result ~= nil then
+						_result()
+					end
+				end
+			end,
+		},
+		clipsDescendants = true,
+	}))), if validationError ~= "" and validationError then (React.createElement(Text, {
+		text = validationError,
+		font = theme.fonts.inter.bold,
+		textColor = theme.palette.red,
+		textScaled = true,
+		size = UDim2.new(1, 0, 0, rem(2.6)),
+		textXAlignment = "Left",
+	}, React.createElement("uicorner", {
+		CornerRadius = fullRound,
+	}))) else nil, children)
+end)
+return {
+	InputRound = InputRound,
+}

package/dist/form/InputRow.d.ts

@@ -0,0 +1,13 @@
+import React from "@rbxts/react";
+export interface InputRowProps {
+    value: string;
+    emoji: string;
+    emojiColor: Color3;
+    placeholderText: string;
+    label: string;
+    onTextChanged: (value: string) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export declare function InputRow({ value, emoji, emojiColor, placeholderText, label, onTextChanged, disabled, children, }: InputRowProps): JSX.Element;
+//# sourceMappingURL=InputRow.d.ts.map

package/dist/form/InputRow.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local FormRow = TS.import(script, script.Parent, "FormRow").FormRow
+local InputRound = TS.import(script, script.Parent, "InputRound").InputRound
+local function InputRow(_param)
+	local value = _param.value
+	local emoji = _param.emoji
+	local emojiColor = _param.emojiColor
+	local placeholderText = _param.placeholderText
+	local label = _param.label
+	local onTextChanged = _param.onTextChanged
+	local disabled = _param.disabled
+	local children = _param.children
+	return React.createElement(FormRow, {
+		label = label,
+		disabled = disabled,
+	}, React.createElement(InputRound, {
+		value = value,
+		emoji = emoji,
+		placeholderText = placeholderText,
+		primary = emojiColor,
+		order = 0,
+		onTextChanged = onTextChanged,
+		disabled = disabled,
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	})), children)
+end
+return {
+	InputRow = InputRow,
+}

package/dist/{Radio.d.ts → form/Radio.d.ts}

@@ -1,4 +1,3 @@
-import { type Theme } from "./theme";
 interface RadioProps {
     checked: boolean;
     onChecked: (checked: boolean) => void;
@@ -6,8 +5,7 @@ interface RadioProps {
     variant?: "default" | "large" | "small";
     position?: UDim2;
     disabled?: boolean;
-    theme?: Theme;
 }
-export declare function Radio({ checked, onChecked, text, variant, position, disabled, theme }: RadioProps): JSX.Element;
+export declare function Radio({ checked, onChecked, text, variant, position, disabled }: RadioProps): JSX.Element;
 export type { RadioProps };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/{Radio.luau → form/Radio.luau}

@@ -6,12 +6,12 @@ local useMotion = _pretty_react_hooks.useMotion
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useMemo = _react.useMemo
-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 ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "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 Radio(_param)
 	local checked = _param.checked
 	local onChecked = _param.onChecked
@@ -25,10 +25,7 @@ local function Radio(_param)
 	if disabled == nil then
 		disabled = false
 	end
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
@@ -59,7 +56,6 @@ local function Radio(_param)
 		onHover = function(hovered)
 			return hoverMotion:spring(if hovered then 1 else 0)
 		end,
-		theme = theme,
 	}, React.createElement("uilistlayout", {
 		FillDirection = "Horizontal",
 		VerticalAlignment = "Center",
@@ -82,7 +78,6 @@ local function Radio(_param)
 		innerTransparency = 0,
 		outerTransparency = 1,
 		innerThickness = 2,
-		theme = theme,
 	}), if checked then (React.createElement(Frame, {
 		backgroundColor = theme.palette.blue,
 		backgroundTransparency = 0,

package/dist/{RadioRow.d.ts → form/RadioRow.d.ts}

@@ -1,10 +1,8 @@
-import { type Theme } from "./theme";
 export interface RadioRowProps {
     label: string;
     checked: boolean;
     onChecked: () => void;
     disabled?: boolean;
-    theme?: Theme;
 }
-export declare function RadioRow({ label, checked, onChecked, disabled, theme, }: RadioRowProps): JSX.Element;
+export declare function RadioRow({ label, checked, onChecked, disabled, }: RadioRowProps): JSX.Element;
 //# sourceMappingURL=RadioRow.d.ts.map

package/dist/{RadioRow.luau → form/RadioRow.luau}

@@ -2,20 +2,17 @@
 local TS = _G[script]
 local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local Button = TS.import(script, script.Parent, "Button").Button
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
 local Radio = TS.import(script, script.Parent, "Radio").Radio
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function RadioRow(_param)
 	local label = _param.label
 	local checked = _param.checked
 	local onChecked = _param.onChecked
 	local disabled = _param.disabled
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local textSize = rem(3)
 	return React.createElement(HStack, {
@@ -27,7 +24,6 @@ local function RadioRow(_param)
 		variant = "large",
 		onChecked = onChecked,
 		disabled = disabled,
-		theme = theme,
 	}), React.createElement(Button, {
 		backgroundTransparency = 1,
 		size = UDim2.new(1, 0, 0, rem(4)),

package/dist/form/RoundEmoji.d.ts

@@ -0,0 +1,8 @@
+interface RoundEmojiProps {
+    readonly emoji: string;
+    readonly primary: Color3;
+    readonly height?: number;
+}
+export declare function RoundEmoji({ emoji, primary, height }: RoundEmojiProps): JSX.Element;
+export type { RoundEmojiProps };
+//# sourceMappingURL=RoundEmoji.d.ts.map