@rbxts-ui/components 2.0.0 → 3.0.0

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/form/Radio.d.ts

@@ -0,0 +1,11 @@
+interface RadioProps {
+    checked: boolean;
+    onChecked: (checked: boolean) => void;
+    text?: string;
+    variant?: "default" | "large" | "small";
+    position?: UDim2;
+    disabled?: boolean;
+}
+export declare function Radio({ checked, onChecked, text, variant, position, disabled }: RadioProps): JSX.Element;
+export type { RadioProps };
+//# sourceMappingURL=Radio.d.ts.map

package/dist/form/Radio.luau

@@ -0,0 +1,105 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local lerpBinding = _pretty_react_hooks.lerpBinding
+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", "@rbxts-ui/rem")).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+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, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function Radio(_param)
+	local checked = _param.checked
+	local onChecked = _param.onChecked
+	local text = _param.text
+	local variant = _param.variant
+	if variant == nil then
+		variant = "default"
+	end
+	local position = _param.position
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	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
+	local buttonSize = UDim2.new(0, rem(checkboxSize), 0, rem(checkboxSize))
+	local textWidth, textWidthMotion = useMotion({
+		label = 0,
+		value = 0,
+	})
+	local size = useMemo(function()
+		return textWidth:map(function(_param_1)
+			local label = _param_1.label
+			local value = _param_1.value
+			local content = math.max(label, value)
+			local width = checkboxSize
+			return UDim2.new(0, rem(width) + content, 0, rem(checkboxSize))
+		end)
+	end, { rem })
+	local cornerRadius = UDim.new(1, 0)
+	local mainColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	local textColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	return React.createElement(ReactiveButton, {
+		backgroundTransparency = 1,
+		size = size,
+		position = position,
+		onClick = function()
+			return not disabled and onChecked(not checked)
+		end,
+		onHover = function(hovered)
+			return hoverMotion:spring(if hovered then 1 else 0)
+		end,
+	}, React.createElement("uilistlayout", {
+		FillDirection = "Horizontal",
+		VerticalAlignment = "Center",
+		Padding = UDim.new(0, 8),
+	}), React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = buttonSize,
+	}, React.createElement(Frame, {
+		backgroundColor = theme.palette.white,
+		cornerRadius = cornerRadius,
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uigradient", {
+		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
+		Rotation = 90,
+		Transparency = NumberSequence.new(0, 0.1),
+	})), React.createElement(Outline, {
+		outerColor = mainColor,
+		innerColor = mainColor,
+		cornerRadius = cornerRadius,
+		innerTransparency = 0,
+		outerTransparency = 1,
+		innerThickness = 2,
+	}), if checked then (React.createElement(Frame, {
+		backgroundColor = theme.palette.blue,
+		backgroundTransparency = 0,
+		size = UDim2.new(0.7, 0, 0.7, 0),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+	}, React.createElement("uicorner", {
+		CornerRadius = cornerRadius,
+	}))) else nil), if text ~= "" and text then (React.createElement(Text, {
+		text = text,
+		size = UDim2.new(0, rem(2), 0, rem(2)),
+		textColor = textColor,
+		textXAlignment = "Left",
+		change = {
+			TextBounds = function(rbx)
+				textWidthMotion:spring({
+					value = rbx.TextBounds.X,
+				})
+			end,
+		},
+	})) else nil)
+end
+return {
+	Radio = Radio,
+}

package/dist/form/RadioRow.d.ts

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

package/dist/form/RadioRow.luau

@@ -0,0 +1,46 @@
+-- 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 Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+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.Parent, "buttons", "Button").Button
+local Radio = TS.import(script, script.Parent, "Radio").Radio
+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 = defaultTheme
+	local rem = useRem()
+	local textSize = rem(3)
+	return React.createElement(HStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		spacing = rem(2),
+	}, React.createElement(Radio, {
+		checked = checked,
+		variant = "large",
+		onChecked = onChecked,
+		disabled = disabled,
+	}), React.createElement(Button, {
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(4)),
+		onClick = onChecked,
+	}, React.createElement(Text, {
+		text = label,
+		textSize = textSize,
+		textScaled = true,
+		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		size = UDim2.new(0.8, 0, 0, rem(4)),
+		textXAlignment = "Left",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))), React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))
+end
+return {
+	RadioRow = RadioRow,
+}

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

package/dist/form/RoundEmoji.luau

@@ -0,0 +1,40 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+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 Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local function RoundEmoji(_param)
+	local emoji = _param.emoji
+	local primary = _param.primary
+	local height = _param.height
+	if height == nil then
+		height = 4
+	end
+	local rem = useRem()
+	local fullRound = UDim.new(1, 0)
+	local CIRCLE_SIZE = height
+	local EMOJI_SIZE = CIRCLE_SIZE / 1.5
+	return React.createElement(Group, {
+		size = UDim2.new(0, rem(CIRCLE_SIZE), 0, rem(CIRCLE_SIZE)),
+	}, React.createElement(Frame, {
+		backgroundColor = primary,
+		backgroundTransparency = 0.8,
+		cornerRadius = fullRound,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(1, 0, 1, 0),
+	}), React.createElement(Text, {
+		text = emoji,
+		textScaled = true,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(0, rem(EMOJI_SIZE), 0, rem(EMOJI_SIZE)),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+	}))
+end
+return {
+	RoundEmoji = RoundEmoji,
+}

package/dist/form/TextBox.d.ts

@@ -0,0 +1,24 @@
+import { FrameProps } from "@rbxts-ui/primitives";
+import React from "@rbxts/react";
+export interface TextBoxProps<T extends Instance = TextBox> extends FrameProps<T> {
+    font?: Font;
+    text?: string | React.Binding<string>;
+    textColor?: Color3 | React.Binding<Color3>;
+    textSize?: number | React.Binding<number>;
+    textTransparency?: number | React.Binding<number>;
+    textWrapped?: boolean | React.Binding<boolean>;
+    textXAlignment?: React.InferEnumNames<Enum.TextXAlignment>;
+    textYAlignment?: React.InferEnumNames<Enum.TextYAlignment>;
+    textTruncate?: React.InferEnumNames<Enum.TextTruncate>;
+    textScaled?: boolean | React.Binding<boolean>;
+    textHeight?: number | React.Binding<number>;
+    textAutoResize?: "X" | "Y" | "XY";
+    richText?: boolean | React.Binding<boolean>;
+    maxVisibleGraphemes?: number | React.Binding<number>;
+    lineHeight?: number | React.Binding<number>;
+    clearTextOnFocus?: boolean;
+    placeholderText?: string;
+    textEditable?: boolean | React.Binding<boolean>;
+}
+export declare const TextBox: React.ForwardRefExoticComponent<Omit<TextBoxProps<TextBox>, "ref"> & React.RefAttributes<TextBox>>;
+//# sourceMappingURL=TextBox.d.ts.map

package/dist/form/TextBox.luau

@@ -0,0 +1,57 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local fonts = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).fonts
+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 React = _react
+local forwardRef = _react.forwardRef
+local TextBox = forwardRef(function(props, ref)
+	local rem = useRem()
+	local _attributes = {
+		ref = ref,
+		Font = Enum.Font.Arial,
+		FontFace = props.font or fonts.inter.regular,
+		Text = props.text,
+		TextColor3 = props.textColor,
+	}
+	local _condition = props.textSize
+	if _condition == nil then
+		_condition = rem(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.lineHeight
+	_attributes.RichText = props.richText
+	_attributes.MaxVisibleGraphemes = props.maxVisibleGraphemes
+	_attributes.Size = props.size
+	_attributes.AutomaticSize = props.textAutoResize or props.automaticSize
+	_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.ClipsDescendants = props.clipsDescendants
+	_attributes.Visible = props.visible
+	_attributes.ZIndex = props.zIndex
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.Change = props.change
+	_attributes.Event = props.event
+	_attributes.Rotation = props.rotation
+	_attributes.ClearTextOnFocus = props.clearTextOnFocus
+	_attributes.PlaceholderText = props.placeholderText
+	_attributes.TextEditable = props.textEditable
+	return React.createElement("textbox", _attributes, props.children, props.cornerRadius and React.createElement("uicorner", {
+		CornerRadius = props.cornerRadius,
+	}))
+end)
+return {
+	TextBox = TextBox,
+}

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

@@ -8,5 +8,5 @@ export interface TextFieldProps extends TextProps<TextBox> {
     multiLine?: boolean | React.Binding<boolean>;
     textEditable?: boolean | React.Binding<boolean>;
 }
-export declare function TextField(props: TextFieldProps): JSX.Element;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextBox>>;
 //# sourceMappingURL=TextField.d.ts.map

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

@@ -2,12 +2,13 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local forwardRef = _react.forwardRef
 local useEffect = _react.useEffect
 local useState = _react.useState
 local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
 local fonts = _primitives.fonts
 local Group = _primitives.Group
-local function TextField(props)
+local TextField = forwardRef(function(props, ref)
 	local childRef, setChildRef = useState(nil)
 	useEffect(function()
 		local _condition = childRef
@@ -27,6 +28,7 @@ local function TextField(props)
 		end
 	end, { childRef, props.text })
 	local _attributes = {
+		ref = ref,
 		PlaceholderText = props.placeholderText,
 		PlaceholderColor3 = props.placeholderColor,
 		ClearTextOnFocus = props.clearTextOnFocus,
@@ -65,7 +67,7 @@ local function TextField(props)
 	}), React.createElement(Group, {
 		ref = setChildRef,
 	}))
-end
+end)
 return {
 	TextField = TextField,
 }

package/dist/form/validation.d.ts

@@ -0,0 +1,13 @@
+export declare function validateAngle(val: string): "Please enter a valid number" | "Angle must be greater than 0" | "Angle must be less than 180" | undefined;
+export declare function validatePosNumber(val: string): "Please enter a valid number" | "Number must be greater than 0" | undefined;
+export declare function validateNumber(val: string): "Please enter a valid number" | undefined;
+/**
+ * Validates that a number is within specified bounds
+ * @param val - String value to validate
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param customErrorMsg - Optional custom error message for bounds error
+ * @returns Error message or undefined if valid
+ */
+export declare function validateNumberBounds(val: string, min: number, max: number, customErrorMsg?: string): string | undefined;
+//# sourceMappingURL=validation.d.ts.map