@rbxts/centurion-ui 1.0.0-dev-284510d → 1.0.0-dev-a7b777e

package/out/components/ui/group.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 Group = forwardRef(function(props, ref)
-	return React.createElement("frame", {
-		ref = ref,
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local function Group(props)
+	return Vide.jsx("frame", {
 		Size = props.size or UDim2.fromScale(1, 1),
 		Position = props.position,
 		AnchorPoint = props.anchorPoint,
@@ -15,10 +12,10 @@ local Group = forwardRef(function(props, ref)
 		Visible = props.visible,
 		ZIndex = props.zIndex,
 		BackgroundTransparency = 1,
-		Event = props.event or {},
-		Change = props.change or {},
+		MouseEnter = props.mouseEnter,
+		MouseLeave = props.mouseLeave,
 	}, props.children)
-end)
+end
 return {
 	Group = Group,
 }

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

@@ -1,7 +1,7 @@
-import React from "@rbxts/react";
-interface LayerProps extends React.PropsWithChildren {
-    visible?: boolean;
-    displayOrder?: number;
+import Vide, { Derivable } from "@rbxts/vide";
+interface LayerProps extends Vide.PropsWithChildren {
+    visible?: Derivable<boolean>;
+    displayOrder?: Derivable<number>;
 }
-export declare function Layer({ visible, displayOrder, children }: LayerProps): JSX.Element;
+export declare function Layer({ visible, displayOrder, children }: LayerProps): Vide.Node;
 export {};

package/out/components/ui/layer.lua

@@ -1,16 +1,16 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local IS_EDIT = TS.import(script, script.Parent.Parent.Parent, "constants", "util").IS_EDIT
 local Group = TS.import(script, script.Parent, "group").Group
 local function Layer(_param)
 	local visible = _param.visible
 	local displayOrder = _param.displayOrder
 	local children = _param.children
-	return if IS_EDIT then (React.createElement(Group, {
+	return if IS_EDIT then (Vide.jsx(Group, {
 		visible = visible,
 		zIndex = displayOrder,
-	}, children)) else (React.createElement("screengui", {
+	}, children)) else (Vide.jsx("screengui", {
 		Enabled = visible,
 		ResetOnSpawn = false,
 		DisplayOrder = displayOrder,

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

@@ -1,14 +1,15 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React from "@rbxts/react";
-interface OutlineProps extends React.PropsWithChildren {
-    readonly outlineTransparency?: BindingOrValue<number>;
-    readonly innerColor?: BindingOrValue<Color3>;
-    readonly outerColor?: BindingOrValue<Color3>;
-    readonly innerTransparency?: BindingOrValue<number>;
-    readonly outerTransparency?: BindingOrValue<number>;
-    readonly innerThickness?: BindingOrValue<number>;
-    readonly outerThickness?: BindingOrValue<number>;
-    readonly cornerRadius?: BindingOrValue<UDim>;
+import Vide, { Derivable } from "@rbxts/vide";
+interface OutlineProps {
+    outlineTransparency?: Derivable<number>;
+    innerColor?: Derivable<Color3>;
+    outerColor?: Derivable<Color3>;
+    innerTransparency?: Derivable<number>;
+    outerTransparency?: Derivable<number>;
+    innerThickness?: Derivable<number>;
+    outerThickness?: Derivable<number>;
+    cornerRadius?: Derivable<UDim>;
+    children?: Vide.Node;
 }
-export declare function Outline({ outlineTransparency, innerColor, outerColor, innerTransparency, outerTransparency, innerThickness, outerThickness, cornerRadius, children, }: OutlineProps): JSX.Element;
+export declare function blend(...transparencies: number[]): number;
+export declare function Outline({ outlineTransparency, innerColor, outerColor, innerTransparency, outerTransparency, innerThickness, outerThickness, cornerRadius, children, }: OutlineProps): Vide.Node;
 export {};

package/out/components/ui/outline.lua

@@ -1,16 +1,22 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
-local blend = _pretty_react_hooks.blend
-local composeBindings = _pretty_react_hooks.composeBindings
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local useMemo = _react.useMemo
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local derive = _vide.derive
+local read = _vide.read
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
 local Group = TS.import(script, script.Parent, "group").Group
 local function ceilEven(n)
 	return math.ceil(n / 2) * 2
 end
+local function blend(...)
+	local transparencies = { ... }
+	local result = 1
+	for _, transparency in transparencies do
+		result *= 1 - transparency
+	end
+	return 1 - result
+end
 local DEFAULT_INNER_COLOR = Color3.new(1, 1, 1)
 local DEFAULT_OUTER_COLOR = Color3.new(0, 0, 0)
 local function Outline(_param)
@@ -38,69 +44,73 @@ local function Outline(_param)
 	local outerThickness = _param.outerThickness
 	local cornerRadius = _param.cornerRadius
 	local children = _param.children
-	local px = usePx()
-	local _object = {}
-	local _left = "innerThickness"
-	local _condition = innerThickness
-	if _condition == nil then
-		_condition = px(3)
-	end
-	_object[_left] = _condition
-	local _left_1 = "outerThickness"
-	local _condition_1 = outerThickness
-	if _condition_1 == nil then
-		_condition_1 = px(1.5)
-	end
-	_object[_left_1] = _condition_1
-	_object.cornerRadius = cornerRadius or UDim.new(0, px(8))
-	local properties = _object
-	local innerStyle = useMemo(function()
-		local size = composeBindings(properties.innerThickness, function(thickness)
-			return UDim2.new(1, ceilEven(-2 * thickness), 1, ceilEven(-2 * thickness))
-		end)
-		local position = composeBindings(properties.innerThickness, function(thickness)
-			return UDim2.new(0, thickness, 0, thickness)
-		end)
-		local radius = composeBindings(properties.cornerRadius, properties.innerThickness, function(radius, thickness)
-			local _radius = radius
-			local _uDim = UDim.new(0, thickness)
-			return _radius - _uDim
-		end)
-		local transparency = composeBindings(outlineTransparency, innerTransparency, function(a, b)
-			return math.clamp(blend(a, b), 0, 1)
-		end)
+	local properties = derive(function()
+		local _object = {}
+		local _left = "innerThickness"
+		local _condition = innerThickness
+		if _condition == nil then
+			_condition = px(3)
+		end
+		_object[_left] = _condition
+		local _left_1 = "outerThickness"
+		local _condition_1 = outerThickness
+		if _condition_1 == nil then
+			_condition_1 = px(1.5)
+		end
+		_object[_left_1] = _condition_1
+		_object.cornerRadius = cornerRadius or UDim.new(0, px(8))
+		return _object
+	end)
+	local innerStyle = derive(function()
+		local outlineProps = properties()
+		local thickness = read(outlineProps.innerThickness)
+		local size = UDim2.new(1, ceilEven(-2 * thickness), 1, ceilEven(-2 * thickness))
+		local position = UDim2.new(0, thickness, 0, thickness)
+		local _exp = read(outlineProps.cornerRadius)
+		local _uDim = UDim.new(0, thickness)
+		local radius = _exp - _uDim
+		local transparency = math.clamp(blend(read(outlineTransparency), read(innerTransparency)), 0, 1)
 		return {
 			size = size,
 			position = position,
 			radius = radius,
 			transparency = transparency,
 		}
-	end, { properties.innerThickness, innerTransparency, properties.cornerRadius, outlineTransparency, px })
-	local outerStyle = useMemo(function()
-		local transparency = composeBindings(outlineTransparency, outerTransparency, function(a, b)
-			return math.clamp(blend(a, b), 0, 1)
-		end)
+	end)
+	local outerStyle = derive(function()
+		local transparency = math.clamp(blend(read(outlineTransparency), read(outerTransparency)), 0, 1)
 		return {
 			transparency = transparency,
 		}
-	end, { outlineTransparency, outerTransparency })
-	return React.createElement(React.Fragment, nil, React.createElement(Group, {
-		size = innerStyle.size,
-		position = innerStyle.position,
-	}, React.createElement("uicorner", {
-		CornerRadius = innerStyle.radius,
-	}), React.createElement("uistroke", {
+	end)
+	return Vide.jsx(Vide.Fragment, nil, Vide.jsx(Group, {
+		size = function()
+			return innerStyle().size
+		end,
+		position = function()
+			return innerStyle().position
+		end,
+	}, Vide.jsx("uicorner", {
+		CornerRadius = function()
+			return innerStyle().radius
+		end,
+	}), Vide.jsx("uistroke", {
 		Color = innerColor,
-		Transparency = innerStyle.transparency,
+		Transparency = function()
+			return innerStyle().transparency
+		end,
 		Thickness = innerThickness,
-	}, children)), React.createElement(Group, nil, React.createElement("uicorner", {
+	}, children)), Vide.jsx(Group, nil, Vide.jsx("uicorner", {
 		CornerRadius = cornerRadius,
-	}), React.createElement("uistroke", {
+	}), Vide.jsx("uistroke", {
 		Color = outerColor,
-		Transparency = outerStyle.transparency,
+		Transparency = function()
+			return outerStyle().transparency
+		end,
 		Thickness = outerThickness,
 	}, children)))
 end
 return {
+	blend = blend,
 	Outline = Outline,
 }

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

@@ -1,10 +1,10 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import Vide, { Derivable } from "@rbxts/vide";
 interface Props {
-    all?: BindingOrValue<UDim>;
-    left?: BindingOrValue<UDim>;
-    right?: BindingOrValue<UDim>;
-    top?: BindingOrValue<UDim>;
-    bottom?: BindingOrValue<UDim>;
+    all?: Derivable<UDim>;
+    left?: Derivable<UDim>;
+    right?: Derivable<UDim>;
+    top?: Derivable<UDim>;
+    bottom?: Derivable<UDim>;
 }
-export declare function Padding({ all, left, right, top, bottom }: Props): JSX.Element;
+export declare function Padding({ all, left, right, top, bottom }: Props): Vide.Node;
 export {};

package/out/components/ui/padding.lua

@@ -1,13 +1,13 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
 local function Padding(_param)
 	local all = _param.all
 	local left = _param.left
 	local right = _param.right
 	local top = _param.top
 	local bottom = _param.bottom
-	return React.createElement("uipadding", {
+	return Vide.jsx("uipadding", {
 		PaddingLeft = left or all,
 		PaddingRight = right or all,
 		PaddingTop = top or all,

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

@@ -1,15 +1,14 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React from "@rbxts/react";
+import Vide, { Derivable, InferEnumNames } from "@rbxts/vide";
 import { FrameProps } from "./frame";
 export interface ScrollingFrameProps extends FrameProps<ScrollingFrame> {
-    automaticSize?: React.InferEnumNames<Enum.AutomaticSize>;
-    automaticCanvasSize?: React.InferEnumNames<Enum.AutomaticSize>;
-    scrollingDirection?: React.InferEnumNames<Enum.ScrollingDirection>;
-    scrollBarThickness?: BindingOrValue<number>;
-    scrollBarColor?: BindingOrValue<Color3>;
-    scrollBarTransparency?: BindingOrValue<number>;
-    scrollingEnabled?: BindingOrValue<boolean>;
-    canvasSize?: BindingOrValue<UDim2>;
-    canvasPosition?: BindingOrValue<Vector2>;
+    automaticSize?: InferEnumNames<Enum.AutomaticSize>;
+    automaticCanvasSize?: InferEnumNames<Enum.AutomaticSize>;
+    scrollingDirection?: InferEnumNames<Enum.ScrollingDirection>;
+    scrollBarThickness?: Derivable<number>;
+    scrollBarColor?: Derivable<Color3>;
+    scrollBarTransparency?: Derivable<number>;
+    scrollingEnabled?: Derivable<boolean>;
+    canvasSize?: Derivable<UDim2>;
+    canvasPosition?: Derivable<Vector2>;
 }
-export declare const ScrollingFrame: React.ForwardRefExoticComponent<Omit<ScrollingFrameProps, "ref"> & React.RefAttributes<ScrollingFrame>>;
+export declare function ScrollingFrame(props: ScrollingFrameProps): Vide.Node;

package/out/components/ui/scrolling-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 ScrollingFrame = forwardRef(function(props, ref)
+local Vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local function ScrollingFrame(props)
 	local _attributes = {
-		ref = ref,
 		AutomaticSize = props.automaticSize,
 		AutomaticCanvasSize = props.automaticCanvasSize,
 		ScrollingDirection = props.scrollingDirection,
@@ -31,12 +28,10 @@ local ScrollingFrame = forwardRef(function(props, ref)
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
 	_attributes.BorderSizePixel = 0
-	_attributes.Event = props.event or {}
-	_attributes.Change = props.change or {}
-	return React.createElement("scrollingframe", _attributes, props.cornerRadius and React.createElement("uicorner", {
+	return Vide.jsx("scrollingframe", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)
-end)
+end
 return {
 	ScrollingFrame = ScrollingFrame,
 }

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

@@ -1,13 +1,14 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React from "@rbxts/react";
+import Vide, { Derivable } from "@rbxts/vide";
 import { TextProps } from "./text";
 interface TextFieldProps extends TextProps<TextBox> {
-    text?: BindingOrValue<string>;
-    placeholderText?: BindingOrValue<string>;
-    placeholderColor?: BindingOrValue<Color3>;
-    clearTextOnFocus?: BindingOrValue<boolean>;
-    multiLine?: BindingOrValue<boolean>;
-    textEditable?: BindingOrValue<boolean>;
+    text?: Derivable<string>;
+    placeholderText?: Derivable<string>;
+    placeholderColor?: Derivable<Color3>;
+    clearTextOnFocus?: Derivable<boolean>;
+    multiLine?: Derivable<boolean>;
+    textEditable?: Derivable<boolean>;
+    focusLost?: (enterPressed: boolean) => void;
+    textChanged?: (text: string) => void;
 }
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextBox>>;
+export declare function TextField(props: TextFieldProps): Vide.Node;
 export {};

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

@@ -1,21 +1,22 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local forwardRef = _react.forwardRef
-local useContext = _react.useContext
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
-local TextField = forwardRef(function(props, ref)
-	local options = useContext(OptionsContext)
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local read = _vide.read
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
+local function TextField(props)
+	local options = useAtom(interfaceOptions)
 	local _attributes = {
-		ref = ref,
 		PlaceholderText = props.placeholderText,
 		PlaceholderColor3 = props.placeholderColor,
 		ClearTextOnFocus = props.clearTextOnFocus,
 		MultiLine = props.multiLine,
 		TextEditable = props.textEditable,
 		Font = Enum.Font.Unknown,
-		FontFace = props.font or options.font.regular,
+		FontFace = function()
+			return read(props.font) or options().font.regular
+		end,
 		Text = props.text,
 		TextColor3 = props.textColor,
 		TextSize = props.textSize,
@@ -42,12 +43,13 @@ local TextField = forwardRef(function(props, ref)
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
 	_attributes.BorderSizePixel = 0
-	_attributes.Event = props.event or {}
-	_attributes.Change = props.change or {}
-	return React.createElement("textbox", _attributes, props.cornerRadius and React.createElement("uicorner", {
+	_attributes.FocusLost = props.focusLost
+	_attributes.TextChanged = props.textChanged
+	_attributes.action = props.action
+	return Vide.jsx("textbox", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)
-end)
+end
 return {
 	TextField = TextField,
 }

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

@@ -1,20 +1,20 @@
-import { BindingOrValue } from "@rbxts/pretty-react-hooks";
-import React from "@rbxts/react";
+import Vide, { Derivable, InferEnumNames } from "@rbxts/vide";
 import { FrameProps } from "./frame";
 export interface TextProps<T extends Instance = TextLabel> extends FrameProps<T> {
-    font?: Font;
-    text?: BindingOrValue<string>;
-    textColor?: BindingOrValue<Color3>;
-    textSize?: BindingOrValue<number>;
-    textTransparency?: BindingOrValue<number>;
-    textWrapped?: BindingOrValue<boolean>;
-    textXAlignment?: React.InferEnumNames<Enum.TextXAlignment>;
-    textYAlignment?: React.InferEnumNames<Enum.TextYAlignment>;
-    textTruncate?: React.InferEnumNames<Enum.TextTruncate>;
-    textScaled?: BindingOrValue<boolean>;
-    textHeight?: BindingOrValue<number>;
+    font?: Derivable<Font>;
+    text?: Derivable<string>;
+    textColor?: Derivable<Color3>;
+    textSize?: Derivable<number>;
+    textTransparency?: Derivable<number>;
+    textWrapped?: Derivable<boolean>;
+    textXAlignment?: InferEnumNames<Enum.TextXAlignment>;
+    textYAlignment?: InferEnumNames<Enum.TextYAlignment>;
+    textTruncate?: InferEnumNames<Enum.TextTruncate>;
+    textScaled?: Derivable<boolean>;
+    textHeight?: Derivable<number>;
     textAutoResize?: "X" | "Y" | "XY";
-    richText?: BindingOrValue<boolean>;
-    maxVisibleGraphemes?: BindingOrValue<number>;
+    richText?: Derivable<boolean>;
+    maxVisibleGraphemes?: Derivable<number>;
+    textBoundsChanged?: (textBounds: Vector2) => void;
 }
-export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<TextLabel>, "ref"> & React.RefAttributes<TextLabel>>;
+export declare function Text(props: TextProps): Vide.Node;

package/out/components/ui/text.lua

@@ -1,55 +1,56 @@
 -- 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 useContext = _react.useContext
-local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
-local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
-local Text = forwardRef(function(props, ref)
-	local px = usePx()
-	local options = useContext(OptionsContext)
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local Vide = _vide
+local read = _vide.read
+local useAtom = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-atom").useAtom
+local px = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").px
+local interfaceOptions = TS.import(script, script.Parent.Parent.Parent, "store").interfaceOptions
+local function Text(props)
+	local options = useAtom(interfaceOptions)
 	local _attributes = {
-		ref = ref,
-		Font = Enum.Font.Unknown,
-		FontFace = props.font or options.font.regular,
+		FontFace = function()
+			return read(props.font) or options().font.regular
+		end,
 		Text = props.text,
 		TextColor3 = props.textColor,
+		TextSize = function()
+			local _condition = read(props.textSize)
+			if _condition == nil then
+				_condition = px(16)
+			end
+			return _condition
+		end,
+		TextTransparency = props.textTransparency,
+		TextWrapped = props.textWrapped,
+		TextXAlignment = props.textXAlignment,
+		TextYAlignment = props.textYAlignment,
+		TextTruncate = props.textTruncate,
+		TextScaled = props.textScaled,
+		LineHeight = props.textHeight,
+		RichText = props.richText,
+		MaxVisibleGraphemes = props.maxVisibleGraphemes,
+		Size = props.size,
+		AutomaticSize = props.textAutoResize,
+		Position = props.position,
+		AnchorPoint = props.anchorPoint,
+		BackgroundColor3 = props.backgroundColor,
 	}
-	local _condition = props.textSize
+	local _condition = props.backgroundTransparency
 	if _condition == nil then
-		_condition = px(16)
+		_condition = 1
 	end
-	_attributes.TextSize = _condition
-	_attributes.TextTransparency = props.textTransparency
-	_attributes.TextWrapped = props.textWrapped
-	_attributes.TextXAlignment = props.textXAlignment
-	_attributes.TextYAlignment = props.textYAlignment
-	_attributes.TextTruncate = props.textTruncate
-	_attributes.TextScaled = props.textScaled
-	_attributes.LineHeight = props.textHeight
-	_attributes.RichText = props.richText
-	_attributes.MaxVisibleGraphemes = props.maxVisibleGraphemes
-	_attributes.Size = props.size
-	_attributes.AutomaticSize = props.textAutoResize
-	_attributes.Position = props.position
-	_attributes.AnchorPoint = props.anchorPoint
-	_attributes.BackgroundColor3 = props.backgroundColor
-	local _condition_1 = props.backgroundTransparency
-	if _condition_1 == nil then
-		_condition_1 = 1
-	end
-	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BackgroundTransparency = _condition
 	_attributes.ClipsDescendants = props.clipsDescendants
 	_attributes.Visible = props.visible
 	_attributes.ZIndex = props.zIndex
 	_attributes.LayoutOrder = props.layoutOrder
-	_attributes.Change = props.change or {}
-	_attributes.Event = props.event or {}
-	return React.createElement("textlabel", _attributes, props.cornerRadius and React.createElement("uicorner", {
+	_attributes.action = props.action
+	_attributes.TextBoundsChanged = props.textBoundsChanged
+	return Vide.jsx("textlabel", _attributes, props.cornerRadius and Vide.jsx("uicorner", {
 		CornerRadius = props.cornerRadius,
 	}), props.children)
-end)
+end
 return {
 	Text = Text,
 }

package/out/constants/springs.lua

@@ -1,6 +1,6 @@
 -- Compiled with roblox-ts v2.3.0-dev-26ec859
 local TS = _G[script]
-local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple")).config
+local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple").src).config
 local _object = table.clone(config.spring)
 setmetatable(_object, nil)
 _object.bubbly = {

package/out/hooks/use-api.d.ts

@@ -0,0 +1,3 @@
+import { ClientAPI } from "@rbxts/centurion";
+export declare function getAPI(): ClientAPI;
+export declare function useAPI(clientAPI: ClientAPI): import("@rbxts/vide").Source<ClientAPI | undefined>;

package/out/hooks/use-api.lua

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local source = TS.import(script, TS.getModule(script, "@rbxts", "vide").src).source
+local api = source()
+local function getAPI()
+	local value = api()
+	local _arg0 = value ~= nil
+	assert(_arg0, "Client API has not been set")
+	return value
+end
+local function useAPI(clientAPI)
+	api(clientAPI)
+	return api
+end
+return {
+	getAPI = getAPI,
+	useAPI = useAPI,
+}

package/out/hooks/use-atom.d.ts

@@ -0,0 +1,2 @@
+import { Molecule } from "@rbxts/charm";
+export declare function useAtom<T>(atom: Molecule<T>): import("@rbxts/vide").Source<T>;

package/out/hooks/use-atom.lua

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local subscribe = TS.import(script, TS.getModule(script, "@rbxts", "charm").src).subscribe
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local cleanup = _vide.cleanup
+local source = _vide.source
+local function useAtom(atom)
+	local state = source(atom())
+	local disconnect = subscribe(atom, state)
+	cleanup(function()
+		disconnect()
+	end)
+	return state
+end
+return {
+	useAtom = useAtom,
+}

package/out/hooks/use-debounce-source.d.ts

@@ -0,0 +1,11 @@
+import { DebounceOptions } from "@rbxts/set-timeout";
+export interface UseDebounceOptions extends DebounceOptions {
+    /**
+     * The amount of time to wait before the first call.
+     */
+    wait?: number;
+}
+export declare function useDebounceSource<T>(initialValue: T, options?: UseDebounceOptions): {
+    get: () => T;
+    set: (value: T) => T;
+};

package/out/hooks/use-debounce-source.lua

@@ -0,0 +1,27 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local debounce = TS.import(script, TS.getModule(script, "@rbxts", "set-timeout").out).debounce
+local _vide = TS.import(script, TS.getModule(script, "@rbxts", "vide").src)
+local cleanup = _vide.cleanup
+local source = _vide.source
+local function useDebounceSource(initialValue, options)
+	if options == nil then
+		options = {}
+	end
+	local state = source(initialValue)
+	local update = debounce(state, options.wait, options)
+	cleanup(function()
+		update.cancel()
+	end)
+	return {
+		get = function()
+			return state()
+		end,
+		set = function(value)
+			return update(value)
+		end,
+	}
+end
+return {
+	useDebounceSource = useDebounceSource,
+}