@rbxts/centurion-ui 1.0.0-dev-dacc7af → 1.0.0-dev-a7b777e

package/out/{store/history → components/terminal}/init.lua

@@ -1,7 +1,7 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
 local exports = {}
-for _k, _v in TS.import(script, script, "history-slice") or {} do
+for _k, _v in TS.import(script, script, "terminal") or {} do
 	exports[_k] = _v
 end
 return exports

package/out/components/terminal/terminal-text-field.d.ts

@@ -0,0 +1,11 @@
+import Vide, { Derivable } from "@rbxts/vide";
+interface TerminalTextFieldProps {
+    anchorPoint?: Derivable<Vector2>;
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    backgroundTransparency?: Derivable<number>;
+    onTextChange?: (text: string) => void;
+    onSubmit?: (text: string) => void;
+}
+export declare function TerminalTextField({ anchorPoint, size, position, backgroundTransparency, onTextChange, onSubmit, }: TerminalTextFieldProps): Vide.Node;
+export {};

package/out/components/terminal/terminal-text-field.lua

@@ -0,0 +1,319 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _string = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out.shared.util.string)
+local endsWithSpace = _string.endsWithSpace
+local formatPartsAsPath = _string.formatPartsAsPath
+local subscribe = TS.import(script, TS.getModule(script, "@rbxts", "charm").src).subscribe
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local effect = _vide.effect
+local source = _vide.source
+local getAPI = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-api").getAPI
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local useEvent = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-event").useEvent
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local _store = TS.import(script, script.Parent.Parent.Parent, "store")
+local commandHistory = _store.commandHistory
+local commandHistoryIndex = _store.commandHistoryIndex
+local currentArgIndex = _store.currentArgIndex
+local currentCommandPath = _store.currentCommandPath
+local currentSuggestion = _store.currentSuggestion
+local interfaceOptions = _store.interfaceOptions
+local interfaceVisible = _store.interfaceVisible
+local terminalText = _store.terminalText
+local terminalTextParts = _store.terminalTextParts
+local terminalTextValid = _store.terminalTextValid
+local getArgumentNames = TS.import(script, script.Parent.Parent.Parent, "util", "argument").getArgumentNames
+local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
+local Padding = TS.import(script, script.Parent.Parent, "ui", "padding").Padding
+local Text = TS.import(script, script.Parent.Parent, "ui", "text").Text
+local TextField = TS.import(script, script.Parent.Parent, "ui", "text-field").TextField
+local TEXT_SIZE = 22
+local function TerminalTextField(_param)
+	local anchorPoint = _param.anchorPoint
+	local size = _param.size
+	local position = _param.position
+	local backgroundTransparency = _param.backgroundTransparency
+	local onTextChange = _param.onTextChange
+	local onSubmit = _param.onSubmit
+	local api = getAPI()
+	local options = useAtom(interfaceOptions)
+	local visible = useAtom(interfaceVisible)
+	local valid = useAtom(terminalTextValid)
+	local ref = source(nil)
+	local text = source("")
+	local suggestionText = source("")
+	-- Focus text field when terminal becomes visible
+	effect(function()
+		if visible() then
+			local _result = ref()
+			if _result ~= nil then
+				_result:CaptureFocus()
+			end
+		else
+			local _result = ref()
+			if _result ~= nil then
+				_result:ReleaseFocus()
+			end
+		end
+	end)
+	local traverseHistory = function(up)
+		local history = commandHistory()
+		if #history == 0 then
+			return nil
+		end
+		local historyIndex = commandHistoryIndex()
+		if (up and historyIndex == 0) or (not up and historyIndex == -1) then
+			return nil
+		end
+		local newIndex
+		if up then
+			newIndex = if historyIndex == -1 then #history - 1 else historyIndex - 1
+		else
+			newIndex = if historyIndex ~= #history - 1 then historyIndex + 1 else -1
+		end
+		local newText = if newIndex ~= -1 then history[newIndex + 1] else ""
+		text(newText)
+		suggestionText("")
+		commandHistoryIndex(newIndex)
+		local textBox = ref()
+		if textBox ~= nil then
+			textBox.CursorPosition = #newText + 1
+		end
+	end
+	subscribe(currentSuggestion, function(suggestion)
+		if suggestion == nil then
+			suggestionText("")
+			return nil
+		end
+		local atNextPart = endsWithSpace(terminalText())
+		local textParts = terminalTextParts()
+		local suggestionStartIndex = if #textParts > 0 then (if not atNextPart then #textParts[#textParts] else 0) + 1 else -1
+		if suggestion.type == "command" and suggestionStartIndex > -1 then
+			suggestionText(text() .. string.sub(suggestion.title, suggestionStartIndex))
+			return nil
+		end
+		local command = currentCommandPath()
+		local argIndex = currentArgIndex()
+		if suggestion.type ~= "argument" or command == nil or argIndex == nil then
+			return nil
+		end
+		local newText = text()
+		local argNames = getArgumentNames(api.registry, command)
+		for i = argIndex, #argNames - 1 do
+			if i == argIndex and not atNextPart then
+				if not (#suggestion.others == 0) then
+					newText ..= string.sub(suggestion.others[1], suggestionStartIndex)
+				end
+				newText ..= " "
+				continue
+			end
+			newText = `{newText}{argNames[i + 1]} `
+		end
+		suggestionText(newText)
+	end)
+	useEvent(UserInputService.InputBegan, function(input)
+		local textBox = ref()
+		local _condition = textBox == nil
+		if not _condition then
+			local _result = textBox
+			if _result ~= nil then
+				_result = _result:IsFocused()
+			end
+			_condition = not _result
+		end
+		if _condition then
+			return nil
+		end
+		if input.KeyCode == Enum.KeyCode.Up then
+			traverseHistory(true)
+		elseif input.KeyCode == Enum.KeyCode.Down then
+			traverseHistory(false)
+		end
+		if input.KeyCode ~= Enum.KeyCode.Tab then
+			return nil
+		end
+		-- Handle command suggestions
+		local commandPath = currentCommandPath()
+		local suggestion = currentSuggestion()
+		if commandPath == nil then
+			local _suggestionTitle = suggestion
+			if _suggestionTitle ~= nil then
+				_suggestionTitle = _suggestionTitle.title
+			end
+			local suggestionTitle = _suggestionTitle
+			if suggestionTitle == nil then
+				return nil
+			end
+			local currentText = text()
+			local textParts = terminalTextParts()
+			local newText = ""
+			if endsWithSpace(currentText) then
+				newText = currentText .. suggestionTitle
+			elseif not (#textParts == 0) then
+				local textPartSize = #textParts[#textParts]
+				local _arg1 = #currentText - textPartSize
+				newText = string.sub(currentText, 0, _arg1) .. suggestionTitle
+			end
+			local suggestionTextParts = string.split((string.gsub(suggestionText(), "%s+", " ")), " ")
+			local _nextCommand = api.registry:getCommandByString(formatPartsAsPath(suggestionTextParts))
+			if _nextCommand ~= nil then
+				_nextCommand = _nextCommand.options
+			end
+			local nextCommand = _nextCommand
+			local _condition_1 = nextCommand == nil
+			if not _condition_1 then
+				local _result = nextCommand.arguments
+				if _result ~= nil then
+					_result = #_result
+				end
+				local _condition_2 = _result
+				if _condition_2 == nil then
+					_condition_2 = 0
+				end
+				_condition_1 = _condition_2 > 0
+			end
+			if _condition_1 then
+				newText ..= " "
+			end
+			suggestionText("")
+			text(newText)
+			textBox.CursorPosition = #newText + 1
+			return nil
+		end
+		-- Handle argument suggestions
+		if commandPath == nil or suggestion == nil or #suggestion.others == 0 then
+			return nil
+		end
+		local argIndex = currentArgIndex()
+		local _commandArgs = api.registry:getCommand(commandPath)
+		if _commandArgs ~= nil then
+			_commandArgs = _commandArgs.options.arguments
+		end
+		local commandArgs = _commandArgs
+		if argIndex == nil or commandArgs == nil then
+			return nil
+		end
+		local newText = text()
+		local parts = terminalTextParts()
+		if not endsWithSpace(newText) and not (#parts == 0) then
+			local _newText = newText
+			local _arg1 = #newText - #parts[#parts]
+			newText = string.sub(_newText, 0, _arg1)
+		end
+		local otherSuggestion = suggestion.others[1]
+		if (string.match(otherSuggestion, "%s")) ~= nil then
+			otherSuggestion = `"{otherSuggestion}"`
+		end
+		newText ..= otherSuggestion
+		if argIndex < #commandArgs - 1 then
+			newText ..= " "
+		end
+		suggestionText("")
+		text(newText)
+		textBox.CursorPosition = #newText + 1
+	end)
+	return Vide.jsx(Frame, {
+		anchorPoint = anchorPoint,
+		size = size,
+		position = position,
+		backgroundColor = function()
+			return options().palette.surface
+		end,
+		backgroundTransparency = backgroundTransparency,
+		cornerRadius = function()
+			return UDim.new(0, px(4))
+		end,
+	}, Vide.jsx(Padding, {
+		all = function()
+			return UDim.new(0, px(8))
+		end,
+	}), Vide.jsx(TextField, {
+		action = function(instance)
+			return ref(instance)
+		end,
+		size = UDim2.fromScale(1, 1),
+		text = function()
+			local value = text()
+			-- Remove line breaks
+			if (string.match(value, "[\n\r]")) ~= nil then
+				value = (string.gsub(value, "[\n\r]", ""))
+			end
+			-- Remove all tabs from text input - we use these for autocompletion
+			if (string.match(value, "\t")) ~= nil then
+				value = (string.gsub(value, "\t", ""))
+			end
+			local _result = onTextChange
+			if _result ~= nil then
+				_result(value)
+			end
+			return value
+		end,
+		textSize = function()
+			return px(TEXT_SIZE)
+		end,
+		textColor = function()
+			return if valid() then options().palette.success else options().palette.error
+		end,
+		textXAlignment = "Left",
+		placeholderText = "Enter command...",
+		placeholderColor = function()
+			return options().palette.subtext
+		end,
+		font = function()
+			return options().font.medium
+		end,
+		clearTextOnFocus = false,
+		focusLost = function(enterPressed)
+			if not enterPressed then
+				return nil
+			end
+			local textBox = ref()
+			if textBox == nil then
+				return nil
+			end
+			local currentText = textBox.Text
+			local history = commandHistory()
+			if currentText ~= "" and (#history == 0 or history[#history] ~= currentText) then
+				commandHistory(function(prev)
+					local _array = {}
+					local _length = #_array
+					local _prevLength = #prev
+					table.move(prev, 1, _prevLength, _length + 1, _array)
+					_length += _prevLength
+					_array[_length + 1] = textBox.Text
+					return _array
+				end)
+			end
+			commandHistoryIndex(-1)
+			local _result = onSubmit
+			if _result ~= nil then
+				_result(currentText)
+			end
+			textBox:CaptureFocus()
+			text("")
+		end,
+		textChanged = function(currentText)
+			commandHistoryIndex(-1)
+			text(currentText)
+		end,
+		zIndex = 2,
+	}), Vide.jsx(Text, {
+		size = UDim2.fromScale(1, 1),
+		text = suggestionText,
+		textColor = function()
+			return options().palette.subtext
+		end,
+		textSize = function()
+			return px(TEXT_SIZE)
+		end,
+		textXAlignment = "Left",
+		font = function()
+			return options().font.medium
+		end,
+	}))
+end
+return {
+	TerminalTextField = TerminalTextField,
+}

package/out/components/terminal/terminal.d.ts

@@ -0,0 +1,2 @@
+import Vide from "@rbxts/vide";
+export declare function Terminal(): Vide.Node;

package/out/components/terminal/terminal.lua

@@ -0,0 +1,240 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _centurion = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out)
+local ImmutableRegistryPath = _centurion.ImmutableRegistryPath
+local RegistryPath = _centurion.RegistryPath
+local ArrayUtil = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out.shared.util.data).ArrayUtil
+local _string = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out.shared.util.string)
+local endsWithSpace = _string.endsWithSpace
+local formatPartsAsPath = _string.formatPartsAsPath
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local effect = _vide.effect
+local source = _vide.source
+local HISTORY_TEXT_SIZE = TS.import(script, script.Parent.Parent.Parent, "constants", "text").HISTORY_TEXT_SIZE
+local getAPI = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-api").getAPI
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local useHistory = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-history").useHistory
+local useMotion = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-motion").useMotion
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local _store = TS.import(script, script.Parent.Parent.Parent, "store")
+local currentArgIndex = _store.currentArgIndex
+local currentCommandPath = _store.currentCommandPath
+local currentSuggestion = _store.currentSuggestion
+local interfaceOptions = _store.interfaceOptions
+local mouseOverInterface = _store.mouseOverInterface
+local terminalText = _store.terminalText
+local terminalTextParts = _store.terminalTextParts
+local terminalTextValid = _store.terminalTextValid
+local getMissingArgs = TS.import(script, script.Parent.Parent.Parent, "util", "argument").getMissingArgs
+local _suggestion = TS.import(script, script.Parent.Parent.Parent, "util", "suggestion")
+local getArgumentSuggestion = _suggestion.getArgumentSuggestion
+local getCommandSuggestion = _suggestion.getCommandSuggestion
+local HistoryList = TS.import(script, script.Parent.Parent, "history").HistoryList
+local Frame = TS.import(script, script.Parent.Parent, "ui", "frame").Frame
+local Padding = TS.import(script, script.Parent.Parent, "ui", "padding").Padding
+local TerminalTextField = TS.import(script, script.Parent, "terminal-text-field").TerminalTextField
+local MAX_HEIGHT = HISTORY_TEXT_SIZE * 10
+local TEXT_FIELD_HEIGHT = 40
+local function Terminal()
+	local api = getAPI()
+	local options = useAtom(interfaceOptions)
+	local missingArgs = source({})
+	local history = useHistory()
+	local historyHeight, historyHeightMotion = useMotion(0)
+	effect(function()
+		local totalHeight = history().height
+		local isClamped = totalHeight > px(MAX_HEIGHT)
+		local clampedHeight = if isClamped then px(MAX_HEIGHT) else totalHeight
+		historyHeightMotion:spring(clampedHeight, {
+			mass = 0.1,
+			tension = 300,
+			friction = 15,
+		})
+	end)
+	return Vide.jsx(Frame, {
+		size = function()
+			return UDim2.new(1, 0, 0, math.ceil(px(TEXT_FIELD_HEIGHT + 16) + historyHeight()))
+		end,
+		backgroundColor = function()
+			return options().palette.background
+		end,
+		backgroundTransparency = function()
+			local _condition = options().backgroundTransparency
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end,
+		cornerRadius = function()
+			return UDim.new(0, px(8))
+		end,
+		mouseEnter = function()
+			return mouseOverInterface(true)
+		end,
+		mouseLeave = function()
+			return mouseOverInterface(false)
+		end,
+	}, Vide.jsx(Padding, {
+		all = function()
+			return UDim.new(0, px(8))
+		end,
+	}), Vide.jsx(HistoryList, {
+		size = function()
+			return UDim2.new(1, 0, 1, -px(TEXT_FIELD_HEIGHT + 8))
+		end,
+		data = history,
+		maxHeight = function()
+			return px(MAX_HEIGHT)
+		end,
+	}), Vide.jsx(TerminalTextField, {
+		anchorPoint = Vector2.new(0, 1),
+		size = function()
+			return UDim2.new(1, 0, 0, px(TEXT_FIELD_HEIGHT))
+		end,
+		position = UDim2.fromScale(0, 1),
+		backgroundTransparency = function()
+			local _condition = options().backgroundTransparency
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end,
+		onTextChange = function(text)
+			terminalText(text)
+			terminalTextValid(false)
+			local parts = terminalTextParts()
+			if #parts == 0 then
+				currentCommandPath(nil)
+				currentSuggestion(nil)
+				currentArgIndex(nil)
+				return nil
+			end
+			-- If the text ends in a space, we want to count that as having traversed
+			-- to the next "part" of the text. This means we should include the previous
+			-- text part as part of the parent path.
+			local atNextPart = endsWithSpace(text)
+			local commandPath = currentCommandPath()
+			local atCommand = false
+			if commandPath ~= nil and formatPartsAsPath(ArrayUtil.slice(parts, 0, commandPath:size())) == commandPath:toString() then
+				-- The current path still leads to the command, so it's valid
+				atCommand = true
+			elseif api.registry:getCommandByString(formatPartsAsPath(parts)) ~= nil then
+				atCommand = true
+				commandPath = ImmutableRegistryPath.new(parts)
+			else
+				local currentPath = RegistryPath:empty()
+				for _, part in parts do
+					currentPath:append(part)
+					if api.registry:getCommand(currentPath) ~= nil then
+						atCommand = true
+						break
+					end
+					if #api.registry:getChildPaths(currentPath) == 0 then
+						atCommand = false
+						break
+					end
+				end
+				commandPath = ImmutableRegistryPath:fromPath(currentPath)
+			end
+			local currentPath = currentCommandPath()
+			if not atCommand and currentPath ~= nil then
+				currentCommandPath(nil)
+			elseif atCommand and commandPath ~= currentPath then
+				currentCommandPath(commandPath)
+			end
+			local _result
+			if commandPath ~= nil then
+				local _result_1 = api.registry:getCommand(commandPath)
+				if _result_1 ~= nil then
+					_result_1 = _result_1.options
+				end
+				_result = _result_1
+			else
+				_result = nil
+			end
+			local command = _result
+			if commandPath ~= nil and command ~= nil then
+				local missing = getMissingArgs(api.registry, commandPath, parts)
+				missingArgs(missing)
+				local _result_1 = command.arguments
+				if _result_1 ~= nil then
+					_result_1 = #_result_1 == 0
+				end
+				local _condition = _result_1
+				if _condition == nil then
+					_condition = true
+				end
+				local noArgs = _condition
+				terminalTextValid(noArgs or #missing == 0 or (atNextPart and #missing == 1))
+			else
+				terminalTextValid(false)
+			end
+			-- Update suggestions
+			local showArgs = atCommand and (atNextPart or (commandPath ~= nil and #parts > commandPath:size()))
+			local _result_1
+			if showArgs and command ~= nil then
+				local _result_2 = command.arguments
+				if _result_2 ~= nil then
+					_result_2 = #_result_2
+				end
+				local _condition = _result_2
+				if _condition == nil then
+					_condition = 0
+				end
+				_result_1 = _condition
+			else
+				_result_1 = 0
+			end
+			local argCount = _result_1
+			local currentTextPart = if not atNextPart then parts[#parts] else nil
+			local suggestion
+			if argCount == 0 then
+				local parentPath = if atNextPart then commandPath elseif commandPath:size() ~= 1 then commandPath:parent() else nil
+				suggestion = getCommandSuggestion(api.registry, parentPath, currentTextPart)
+			elseif commandPath ~= nil then
+				-- Handle argument suggestions
+				local argIndex = #parts - commandPath:size() - (if atNextPart then 0 else 1)
+				if argIndex >= argCount then
+					return nil
+				end
+				currentArgIndex(argIndex)
+				suggestion = getArgumentSuggestion(api.registry, commandPath, argIndex, currentTextPart)
+				local _result_2 = suggestion
+				if _result_2 ~= nil then
+					_result_2 = _result_2.error
+				end
+				if _result_2 ~= nil then
+					terminalTextValid(false)
+				end
+			end
+			currentSuggestion(suggestion)
+		end,
+		onSubmit = function()
+			local commandPath = currentCommandPath()
+			local command = if commandPath ~= nil then api.registry:getCommand(commandPath) else nil
+			if commandPath == nil or command == nil then
+				api.dispatcher:addHistoryEntry({
+					success = false,
+					text = "Command not found.",
+					sentAt = os.time(),
+				})
+				return nil
+			end
+			local missing = missingArgs()
+			if not (#missing == 0) then
+				api.dispatcher:addHistoryEntry({
+					success = false,
+					text = `Missing arguments: {table.concat(missing, ", ")}`,
+					sentAt = os.time(),
+				})
+				return nil
+			end
+			local args = ArrayUtil.slice(terminalTextParts(), commandPath:size())
+			api.dispatcher:run(commandPath, args)
+		end,
+	}))
+end
+return {
+	Terminal = Terminal,
+}

package/out/components/ui/frame.d.ts

@@ -1,20 +1,19 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React, { InferEnumNames } from "@rbxts/react";
-export interface FrameProps<T extends Instance = Frame> extends React.PropsWithChildren {
-    ref?: React.Ref<T>;
-    event?: React.InstanceEvent<T>;
-    change?: React.InstanceChangeEvent<T>;
-    size?: BindingOrValue<UDim2>;
-    position?: BindingOrValue<UDim2>;
-    anchorPoint?: BindingOrValue<Vector2>;
-    rotation?: BindingOrValue<number>;
-    backgroundColor?: BindingOrValue<Color3>;
-    backgroundTransparency?: BindingOrValue<number>;
-    clipsDescendants?: BindingOrValue<boolean>;
-    visible?: BindingOrValue<boolean>;
-    zIndex?: BindingOrValue<number>;
-    layoutOrder?: BindingOrValue<number>;
-    cornerRadius?: BindingOrValue<UDim>;
+import Vide, { ActionAttributes, Derivable, InferEnumNames } from "@rbxts/vide";
+export interface FrameProps<T extends Instance = Frame> extends ActionAttributes<T> {
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    anchorPoint?: Derivable<Vector2>;
+    rotation?: Derivable<number>;
+    backgroundColor?: Derivable<Color3>;
+    backgroundTransparency?: Derivable<number>;
+    clipsDescendants?: Derivable<boolean>;
+    visible?: Derivable<boolean>;
+    zIndex?: Derivable<number>;
+    layoutOrder?: Derivable<number>;
+    cornerRadius?: Derivable<UDim>;
     automaticSize?: InferEnumNames<Enum.AutomaticSize>;
+    children?: Vide.Node;
+    mouseEnter?: () => void;
+    mouseLeave?: () => void;
 }
-export declare const Frame: React.ForwardRefExoticComponent<Omit<FrameProps<Frame>, "ref"> & React.RefAttributes<Frame>>;
+export declare function Frame(props: FrameProps): Vide.Node;

package/out/components/ui/frame.lua

@@ -1,11 +1,8 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local forwardRef = _react.forwardRef
-local Frame = forwardRef(function(props, ref)
-	return React.createElement("frame", {
-		ref = ref,
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local function Frame(props)
+	return Vide.jsx("frame", {
 		AutomaticSize = props.automaticSize,
 		Size = props.size,
 		Position = props.position,
@@ -18,12 +15,13 @@ local Frame = forwardRef(function(props, ref)
 		ZIndex = props.zIndex,
 		LayoutOrder = props.layoutOrder,
 		BorderSizePixel = 0,
-		Event = props.event or {},
-		Change = props.change or {},
-	}, props.cornerRadius and React.createElement("uicorner", {
+		MouseEnter = props.mouseEnter,
+		MouseLeave = props.mouseLeave,
+		action = props.action,
+	}, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)
-end)
+end
 return {
 	Frame = Frame,
 }

package/out/components/ui/group.d.ts

@@ -1,17 +1,15 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React from "@rbxts/react";
-interface GroupProps extends React.PropsWithChildren {
-    ref?: React.Ref<Frame>;
-    event?: React.InstanceEvent<Frame>;
-    change?: React.InstanceChangeEvent<Frame>;
-    size?: BindingOrValue<UDim2>;
-    position?: BindingOrValue<UDim2>;
-    anchorPoint?: BindingOrValue<Vector2>;
-    rotation?: BindingOrValue<number>;
-    clipsDescendants?: BindingOrValue<boolean>;
-    layoutOrder?: BindingOrValue<number>;
-    visible?: BindingOrValue<boolean>;
-    zIndex?: BindingOrValue<number>;
+import Vide, { Derivable } from "@rbxts/vide";
+interface GroupProps extends Vide.PropsWithChildren {
+    size?: Derivable<UDim2>;
+    position?: Derivable<UDim2>;
+    anchorPoint?: Derivable<Vector2>;
+    rotation?: Derivable<number>;
+    clipsDescendants?: Derivable<boolean>;
+    layoutOrder?: Derivable<number>;
+    visible?: Derivable<boolean>;
+    zIndex?: Derivable<number>;
+    mouseEnter?: () => void;
+    mouseLeave?: () => void;
 }
-export declare const Group: React.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & React.RefAttributes<Frame>>;
+export declare function Group(props: GroupProps): Vide.Node;
 export {};