@rbxts/react-clean-ui 1.0.5

package/README.md

@@ -0,0 +1,3 @@
+# React Clean UI
+
+[Read the Docs here](https://shadercloud.github.io/rbxts-react-clean-ui/)

package/out/Components/Decorator/BoxShadow.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CssShadow, ShadowElementProps } from "../../Interfaces/";
+interface BoxShadowProps extends ShadowElementProps {
+    value?: CssShadow;
+    color?: Color3;
+    transparency?: number;
+    zindex?: number;
+}
+export declare function BoxShadow(props: BoxShadowProps): React.JSX.Element | undefined;
+export {};

package/out/Components/Decorator/BoxShadow.luau

@@ -0,0 +1,41 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CssHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").CssHelper
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local function BoxShadow(props)
+	local theme = React.useContext(CleanThemeContext)
+	local shadowTheme = theme.components.boxShadow
+	local _condition = props["box-shadow"]
+	if _condition == nil then
+		_condition = props.value
+	end
+	local shadowValue = _condition
+	if shadowValue == nil then
+		return nil
+	end
+	local shadow = CssHelper:parseCssShadow(shadowValue)
+	if shadow == nil then
+		return nil
+	end
+	local _attributes = {
+		Offset = shadow.offset,
+		BlurRadius = shadow.blurRadius,
+		Spread = shadow.spread,
+		Color = props.color or shadowTheme.color,
+	}
+	local _condition_1 = props.transparency
+	if _condition_1 == nil then
+		_condition_1 = shadowTheme.transparency
+	end
+	_attributes.Transparency = _condition_1
+	local _condition_2 = props.zindex
+	if _condition_2 == nil then
+		_condition_2 = -1
+	end
+	_attributes.ZIndex = _condition_2
+	return React.createElement("uishadow", _attributes)
+end
+return {
+	BoxShadow = BoxShadow,
+}

package/out/Components/Decorator/Corners.d.ts

@@ -0,0 +1,7 @@
+import React from "@rbxts/react";
+import { CssSize } from "../../Interfaces/";
+interface CornerProps {
+    radius?: CssSize;
+}
+export declare function Corners(props: CornerProps): React.JSX.Element | undefined;
+export {};

package/out/Components/Decorator/Corners.luau

@@ -0,0 +1,15 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
+local function Corners(props)
+	if props.radius == nil then
+		return nil
+	end
+	return React.createElement("uicorner", {
+		CornerRadius = SizeHelper:toUDim(props.radius),
+	})
+end
+return {
+	Corners = Corners,
+}

package/out/Components/Decorator/Padding.d.ts

@@ -0,0 +1,3 @@
+import React from "@rbxts/react";
+import { PaddingProps } from "../../Interfaces/";
+export declare function Padding(props: PaddingProps): React.JSX.Element;

package/out/Components/Decorator/Padding.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
+local function Padding(props)
+	local theme = React.useContext(CleanThemeContext)
+	local padding = if props.resolvedPadding ~= nil then props.resolvedPadding else SpacingHelper:GetResolvedPadding(theme, props)
+	return React.createElement("uipadding", {
+		PaddingTop = UDim.new(0, padding.top),
+		PaddingBottom = UDim.new(0, padding.bottom),
+		PaddingLeft = UDim.new(0, padding.left),
+		PaddingRight = UDim.new(0, padding.right),
+	})
+end
+return {
+	Padding = Padding,
+}

package/out/Components/Decorator/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BoxShadow';
+export * from './Corners';
+export * from './Padding';

package/out/Components/Decorator/init.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "BoxShadow") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Corners") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Padding") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/Components/Input/Button.d.ts

@@ -0,0 +1,24 @@
+import React, { Component } from "@rbxts/react";
+import { BackgroundElementProps, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+import { IconProps } from "../Surface";
+export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIndexElementProps, BackgroundElementProps, IntentElementProps, ScalableElementProps, IconElementProps {
+    text?: string;
+    fontWeight?: Enum.FontWeight;
+    Event?: React.InstanceEvent<ImageButton>;
+    children?: React.ReactNode;
+    group?: boolean;
+}
+export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
+    children?: string;
+    text: string;
+}
+declare function ButtonText(props: ButtonTextProps): React.JSX.Element;
+export interface ButtonIconProps extends IconProps, IntentElementProps {
+}
+declare function ButtonIcon(props: ButtonIconProps): React.JSX.Element;
+export declare class Button extends Component<ButtonProps> {
+    static Text: typeof ButtonText;
+    static Icon: typeof ButtonIcon;
+    render(): React.ReactNode;
+}
+export {};

package/out/Components/Input/Button.luau

@@ -0,0 +1,159 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local BoxShadow = _Decorator.BoxShadow
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local Icon = TS.import(script, script.Parent.Parent, "Surface").Icon
+local HStack = TS.import(script, script.Parent.Parent, "Layout").HStack
+local _ = TS.import(script, script.Parent.Parent, "Layout")
+local Group = _.Group
+local GroupContext = _.GroupContext
+local function ButtonText(props)
+	local theme = React.useContext(CleanThemeContext)
+	return React.createElement(Text, {
+		text = props.text,
+		typography = TypographyHelper:getTypography(theme, props.scale, theme.components.button.typography),
+		TextColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).textColor,
+	})
+end
+local function ButtonIcon(props)
+	local theme = React.useContext(CleanThemeContext)
+	return React.createElement(Icon, {
+		scale = props.scale,
+		icon = props.icon,
+		spinning = props.spinning,
+		speed = props.speed,
+		color = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).textColor,
+	})
+end
+local function ButtonRender(props)
+	local theme = React.useContext(CleanThemeContext)
+	local hover, setHover = React.useState(false)
+	local group = React.useContext(GroupContext)
+	local padding = SpacingHelper:GetResolvedPadding(theme, props)
+	local _attributes = {}
+	local _object = {}
+	local _spread = props.Event
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	_object.MouseEnter = function(button, x, y)
+		setHover(true)
+		local _result = props.Event
+		if _result ~= nil then
+			_result = _result.MouseEnter
+			if _result ~= nil then
+				_result(button, x, y)
+			end
+		end
+	end
+	_object.MouseLeave = function(button, x, y)
+		setHover(false)
+		local _result = props.Event
+		if _result ~= nil then
+			_result = _result.MouseLeave
+			if _result ~= nil then
+				_result(button, x, y)
+			end
+		end
+	end
+	_attributes.Event = _object
+	local _result
+	if props.group then
+		local _result_1 = group
+		if _result_1 ~= nil then
+			_result_1 = _result_1.size
+			if _result_1 ~= nil then
+				_result_1 = _result_1.X
+			end
+		end
+		local _condition = _result_1
+		if _condition == nil then
+			_condition = 0
+		end
+		_result = _condition
+	else
+		_result = 0
+	end
+	_attributes.Size = UDim2.fromOffset(_result, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	local _condition = props.BackgroundTransparency
+	if _condition == nil then
+		_condition = theme.components.button.backgroundTransparency
+	end
+	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, if hover then "hover" else "default", theme.components.button.intents).backgroundColor
+	_attributes.AutoButtonColor = false
+	_attributes.ZIndex = props.ZIndex
+	local _exp = React.createElement(Corners, {
+		radius = theme.components.button.cornerRadius,
+	})
+	local _exp_1 = React.createElement("uistroke", {
+		Thickness = theme.components.button.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).borderColor,
+	})
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	_attributes_1.value = theme.components.button.boxShadow
+	local _exp_2 = React.createElement(BoxShadow, _attributes_1)
+	local _attributes_2 = table.clone(props)
+	setmetatable(_attributes_2, nil)
+	return React.createElement("imagebutton", _attributes, _exp, _exp_1, _exp_2, React.createElement(Padding, _attributes_2), React.createElement(Group.Element, {
+		enabled = props.group,
+		padding = padding,
+	}, (props.icon ~= nil or props.text ~= nil) and React.createElement(HStack, {
+		valign = "Center",
+		spacing = props.spacing,
+	}, props.icon ~= nil and React.createElement(ButtonIcon, {
+		scale = props.scale,
+		intent = props.intent,
+		icon = props.icon,
+	}), props.text ~= nil and React.createElement(ButtonText, {
+		text = props.text,
+		intent = props.intent,
+		scale = props.scale,
+	})), props.children))
+end
+local Button
+do
+	local super = Component
+	Button = setmetatable({}, {
+		__tostring = function()
+			return "Button"
+		end,
+		__index = super,
+	})
+	Button.__index = Button
+	function Button.new(...)
+		local self = setmetatable({}, Button)
+		return self:constructor(...) or self
+	end
+	function Button:constructor(...)
+		super.constructor(self, ...)
+	end
+	function Button:render()
+		local _attributes = table.clone(self.props)
+		setmetatable(_attributes, nil)
+		return React.createElement(ButtonRender, _attributes)
+	end
+	Button.Text = ButtonText
+	Button.Icon = ButtonIcon
+	Button = ReactComponent(Button) or Button
+end
+return {
+	Button = Button,
+}

package/out/Components/Input/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { BackgroundElementProps, IconName, Intent, IntentElementProps, PaddingProps, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+interface CheckboxProps extends IntentElementProps, PaddingProps, BackgroundElementProps, SpacedElementProps, ScalableElementProps {
+    checked?: boolean;
+    onChange?: (value: boolean) => void;
+    'icon-checked'?: IconName;
+    'icon-unchecked'?: IconName;
+    'intent-checked'?: Intent;
+    'intent-unchecked'?: Intent;
+}
+export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
+export {};

package/out/Components/Input/Checkbox.luau

@@ -0,0 +1,79 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Icon = TS.import(script, script.Parent.Parent, "Surface").Icon
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local function Checkbox(props)
+	local theme = React.useContext(CleanThemeContext)
+	local fieldset = React.useContext(FieldsetContext)
+	local _condition = props.checked
+	if _condition == nil then
+		_condition = false
+	end
+	local checked, setChecked = React.useState(_condition)
+	React.useEffect(function()
+		if not fieldset then
+			return nil
+		end
+		local _connection = fieldset.labelActivated
+		if _connection ~= nil then
+			_connection = _connection.Event:Connect(function()
+				setChecked(function(current)
+					return not current
+				end)
+			end)
+		end
+		local connection = _connection
+		return function()
+			local _result = connection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, { fieldset })
+	React.useEffect(function()
+		local _result = props.onChange
+		if _result ~= nil then
+			_result(checked)
+		end
+	end, { checked })
+	local _attributes = {
+		Size = UDim2.fromOffset(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Event = {
+			Activated = function()
+				setChecked(not checked)
+			end,
+		},
+	}
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = theme.components.button.backgroundTransparency
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).backgroundColor
+	_attributes.AutoButtonColor = false
+	return React.createElement("imagebutton", _attributes, React.createElement(Corners, {
+		radius = theme.components.checkbox.cornerRadius,
+	}), React.createElement("uistroke", {
+		Thickness = theme.components.button.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor,
+	}), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing),
+	}), React.createElement(Icon, {
+		scale = props.scale,
+		icon = if checked then props["icon-checked"] or "check" else props["icon-unchecked"],
+		color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).textColor,
+	}))
+end
+return {
+	Checkbox = Checkbox,
+}

package/out/Components/Input/HoverButton.d.ts

@@ -0,0 +1,16 @@
+import React from "@rbxts/react";
+export interface HoverButtonContextValue {
+    hover: boolean;
+    isSelected: boolean;
+}
+export declare const HoverButtonContext: React.Context<HoverButtonContextValue | undefined>;
+type ImageButtonProps = React.InstanceProps<ImageButton>;
+interface HoverButtonProps {
+    default: ImageButtonProps;
+    hover?: ImageButtonProps;
+    focus?: ImageButtonProps;
+    isSelected?: boolean;
+    children?: React.ReactNode;
+}
+export declare function HoverButton(propSet: HoverButtonProps): React.JSX.Element;
+export {};

package/out/Components/Input/HoverButton.luau

@@ -0,0 +1,127 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HoverButtonContext = React.createContext(nil)
+local function HoverButton(propSet)
+	local hovering, setHovering = React.useState(false)
+	local state = if propSet.isSelected then "focus" elseif hovering then "hover" else "default"
+	local stateProps = propSet[state]
+	-- Object spreading into a new object is supported.
+	-- It is object rest destructuring that roblox-ts does not support.
+	local _object = table.clone(propSet.default)
+	setmetatable(_object, nil)
+	if stateProps then
+		for _k, _v in stateProps do
+			_object[_k] = _v
+		end
+	end
+	local props = _object
+	local defaultEvents = propSet.default.Event
+	local _stateEvents = stateProps
+	if _stateEvents ~= nil then
+		_stateEvents = _stateEvents.Event
+	end
+	local stateEvents = _stateEvents
+	local _attributes = {
+		Active = props.Active,
+		AnchorPoint = props.AnchorPoint,
+		Archivable = props.Archivable,
+		AutoButtonColor = props.AutoButtonColor,
+		AutomaticSize = props.AutomaticSize,
+		BackgroundColor3 = props.BackgroundColor3,
+		BackgroundTransparency = props.BackgroundTransparency,
+		BorderColor3 = props.BorderColor3,
+		BorderMode = props.BorderMode,
+		BorderSizePixel = props.BorderSizePixel,
+		ClipsDescendants = props.ClipsDescendants,
+		LayoutOrder = props.LayoutOrder,
+		NextSelectionDown = props.NextSelectionDown,
+		NextSelectionLeft = props.NextSelectionLeft,
+		NextSelectionRight = props.NextSelectionRight,
+		NextSelectionUp = props.NextSelectionUp,
+		Position = props.Position,
+		Rotation = props.Rotation,
+		Selectable = props.Selectable,
+		SelectionBehaviorDown = props.SelectionBehaviorDown,
+		SelectionBehaviorLeft = props.SelectionBehaviorLeft,
+		SelectionBehaviorRight = props.SelectionBehaviorRight,
+		SelectionBehaviorUp = props.SelectionBehaviorUp,
+		SelectionGroup = props.SelectionGroup,
+		Size = props.Size,
+		SizeConstraint = props.SizeConstraint,
+		Visible = props.Visible,
+		ZIndex = props.ZIndex,
+		Image = props.Image,
+		ImageColor3 = props.ImageColor3,
+		ImageRectOffset = props.ImageRectOffset,
+		ImageRectSize = props.ImageRectSize,
+		ImageTransparency = props.ImageTransparency,
+		ResampleMode = props.ResampleMode,
+		ScaleType = props.ScaleType,
+		SliceCenter = props.SliceCenter,
+		SliceScale = props.SliceScale,
+		TileSize = props.TileSize,
+	}
+	local _object_1 = {}
+	if defaultEvents then
+		for _k, _v in defaultEvents do
+			_object_1[_k] = _v
+		end
+	end
+	if stateEvents then
+		for _k, _v in stateEvents do
+			_object_1[_k] = _v
+		end
+	end
+	_object_1.MouseEnter = function(button, x, y)
+		setHovering(true)
+		local _result = stateEvents
+		if _result ~= nil then
+			_result = _result.MouseEnter
+			if _result ~= nil then
+				_result(button, x, y)
+			end
+		end
+		if stateEvents ~= defaultEvents then
+			local _result_1 = defaultEvents
+			if _result_1 ~= nil then
+				_result_1 = _result_1.MouseEnter
+				if _result_1 ~= nil then
+					_result_1(button, x, y)
+				end
+			end
+		end
+	end
+	_object_1.MouseLeave = function(button, x, y)
+		setHovering(false)
+		local _result = stateEvents
+		if _result ~= nil then
+			_result = _result.MouseLeave
+			if _result ~= nil then
+				_result(button, x, y)
+			end
+		end
+		if stateEvents ~= defaultEvents then
+			local _result_1 = defaultEvents
+			if _result_1 ~= nil then
+				_result_1 = _result_1.MouseLeave
+				if _result_1 ~= nil then
+					_result_1(button, x, y)
+				end
+			end
+		end
+	end
+	_attributes.Event = _object_1
+	_attributes.Change = props.Change
+	_attributes.Tag = props.Tag
+	return React.createElement(HoverButtonContext.Provider, {
+		value = {
+			hover = hovering,
+			isSelected = propSet.isSelected == true,
+		},
+	}, React.createElement("imagebutton", _attributes, propSet.children))
+end
+return {
+	HoverButton = HoverButton,
+	HoverButtonContext = HoverButtonContext,
+}

package/out/Components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+interface InputProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
+    value: string;
+    placeholder?: string;
+    validation?: "Number" | "String" | "None" | "Int";
+    onChange?: (value: string) => void;
+    Event?: React.InstanceEvent<TextBox>;
+    controlled?: boolean;
+}
+export declare function Input(props: InputProps): React.JSX.Element;
+export {};

package/out/Components/Input/Input.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useRef = _react.useRef
+local useState = _react.useState
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local TypographyHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").TypographyHelper
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
+local function Input(props)
+	local theme = React.useContext(CleanThemeContext)
+	local fieldset = React.useContext(FieldsetContext)
+	local _labelActivated = fieldset
+	if _labelActivated ~= nil then
+		_labelActivated = _labelActivated.labelActivated
+	end
+	local labelActivated = _labelActivated
+	local ref = useRef()
+	local value, setValue = useState(props.value)
+	local typography = TypographyHelper:getTypography(theme, props.scale, theme.components.input.typography)
+	React.useEffect(function()
+		if not labelActivated then
+			return nil
+		end
+		local connection = labelActivated.Event:Connect(function()
+			local _result = ref.current
+			if _result ~= nil then
+				_result:CaptureFocus()
+			end
+		end)
+		return function()
+			return connection:Disconnect()
+		end
+	end, { labelActivated, ref })
+	local _exp = React.createElement("uistroke", {
+		Thickness = theme.components.input.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = theme.components.input.borderColor,
+	})
+	local _exp_1 = React.createElement(Corners, {
+		radius = theme.components.input.cornerRadius,
+	})
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	local _exp_2 = React.createElement(Padding, _attributes)
+	local _attributes_1 = {
+		ref = ref,
+		Size = UDim2.fromScale(1, 0),
+		BackgroundTransparency = 1,
+		AutomaticSize = Enum.AutomaticSize.Y,
+		TextXAlignment = props.TextXAlignment or Enum.TextXAlignment.Left,
+		FontFace = Font.fromName(typography.font.Name, typography.weight or Enum.FontWeight.Regular),
+		FontSize = typography.size,
+	}
+	local _condition = props.PlaceholderText
+	if _condition == nil then
+		_condition = props.placeholder
+	end
+	_attributes_1.PlaceholderText = _condition
+	_attributes_1.PlaceholderColor3 = props.PlaceholderColor3
+	_attributes_1.TextScaled = props.TextScaled
+	_attributes_1.LineHeight = typography.lineHeight
+	_attributes_1.Text = if props.controlled then props.value else value
+	_attributes_1.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
+	_attributes_1.ClearTextOnFocus = false
+	_attributes_1.Event = props.Event
+	_attributes_1.Change = {
+		Text = function(rbx)
+			local number = tonumber(rbx.Text)
+			if (props.validation == "Number" or props.validation == "Int") and number == nil and rbx.Text ~= "" and rbx.Text ~= "-" then
+				ref.current.Text = props.value
+				return nil
+			end
+			setValue(rbx.Text)
+			local _result = props.onChange
+			if _result ~= nil then
+				_result(rbx.Text)
+			end
+		end,
+	}
+	return React.createElement("frame", {
+		Size = UDim2.fromScale(1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}, _exp, _exp_1, _exp_2, React.createElement("textbox", _attributes_1))
+end
+return {
+	Input = Input,
+}

package/out/Components/Input/Select.d.ts

@@ -0,0 +1,30 @@
+import React, { Component } from "@rbxts/react";
+import { CssSize, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+interface SelectProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
+    selected?: number;
+    'max-height'?: CssSize;
+    onChange?: (selected: number, value?: string) => void;
+    Event?: React.InstanceEvent<TextBox>;
+}
+interface SelectState {
+    selected: number;
+    open: boolean;
+    dropdownSize: UDim2;
+    dropdownPosition: UDim2;
+}
+interface SelectOptionProps {
+    text?: string;
+    children?: React.ReactNode;
+    Event?: React.InstanceEvent<ImageButton>;
+    index?: number;
+    value?: string;
+    BackgroundColor3?: Color3;
+}
+declare function SelectOption(props: SelectOptionProps): React.JSX.Element;
+export declare class Select extends Component<SelectProps, SelectState> {
+    static Option: typeof SelectOption;
+    state: SelectState;
+    private buttonRef;
+    render(): React.JSX.Element;
+}
+export {};