@rbxts/uiblox 0.2.0-alpha.37 → 0.2.0-alpha.38

package/out/ui/packages/rayEditor/components/RayEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local VectorEditor = TS.import(script, script.Parent.Parent.Parent, "vectorEditor").VectorEditor
 local useRayEditorStyles = TS.import(script, script.Parent, "RayEditor.styles").default
@@ -14,6 +15,7 @@ local function RayEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useRayEditorStyles()
+	local hover = useEditorHover(disabled)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -23,12 +25,18 @@ local function RayEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/rayEditor/components/RayEditor.styles.luau

@@ -3,8 +3,11 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorText = _editorFace.editorText
 local useRayEditorStyles = componentStyles("RayEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,7 +16,7 @@ local useRayEditorStyles = componentStyles("RayEditor", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
@@ -21,15 +24,18 @@ local useRayEditorStyles = componentStyles("RayEditor", function(theme)
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	return createStyles(_object)
 end)
 local default = useRayEditorStyles
 return {

package/out/ui/packages/rectEditor/components/RectEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useRectEditorStyles = TS.import(script, script.Parent, "RectEditor.styles").default
@@ -22,6 +23,7 @@ local function RectEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useRectEditorStyles()
+	local hover = useEditorHover(disabled)
 	local amounts = {
 		MinX = value.Min.X,
 		MinY = value.Min.Y,
@@ -41,12 +43,18 @@ local function RectEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = table.clone(styles.wrap)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/rectEditor/components/RectEditor.styles.luau

@@ -4,9 +4,12 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorText = _editorFace.editorText
 local useRectEditorStyles = componentStyles("RectEditor", function(theme)
-	local gap = theme.padding.calc(1)
-	return createStyles({
+	local gap = editorPad(theme)
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -15,53 +18,57 @@ local useRectEditorStyles = componentStyles("RectEditor", function(theme)
 		},
 		wrap = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		group = {
-			Size = UDim2.new(1, 0, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		groupLabel = {
-			Size = UDim2.new(1, 0, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		pair = {
-			FillDirection = Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, gap),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		cell = {
-			Size = UDim2.new(0.5, -gap / 2, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		stack = {
-			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		label = {
+		group = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-		},
-		field = {
-			Size = UDim2.new(1, 0, 0, controlMetrics(theme.density).height),
-			BackgroundTransparency = 1,
 		},
-	})
+	}
+	local _left = "groupLabel"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.pair = {
+		FillDirection = Enum.FillDirection.Horizontal,
+		Padding = UDim.new(0, gap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}
+	_object.cell = {
+		Size = UDim2.new(0.5, -gap / 2, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}
+	_object.stack = {
+		FillDirection = Enum.FillDirection.Vertical,
+		Padding = UDim.new(0, gap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}
+	local _left_1 = "label"
+	local _object_2 = {
+		Size = UDim2.new(1, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	_object.field = {
+		Size = UDim2.new(1, 0, 0, controlMetrics(theme.density).height),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useRectEditorStyles
 return {

package/out/ui/packages/select/components/Select.d.ts

@@ -16,6 +16,8 @@ export interface SelectProps<T> {
     empty?: React.Element;
     reducedMotion?: boolean;
     size?: ControlSize;
+    hasError?: boolean;
+    helperText?: string;
 }
 declare function Select<T>(props: CustomizedProps<Frame, SelectProps<T>>): JSX.Element;
 export default Select;

package/out/ui/packages/select/components/Select.luau

@@ -17,6 +17,7 @@ local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
+local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
@@ -38,6 +39,7 @@ local _selectMulti = TS.import(script, script.Parent, "selectMulti")
 local includesChoice = _selectMulti.includesChoice
 local selectionLabel = _selectMulti.selectionLabel
 local typeaheadChoice = TS.import(script, script.Parent, "selectTypeahead").typeaheadChoice
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local selectWidth = TS.import(script, script.Parent, "selectWidth").selectWidth
 local stepChoice = TS.import(script, script.Parent, "stepChoice").stepChoice
 local function Select(props)
@@ -62,6 +64,11 @@ local function Select(props)
 	local empty = _binding.empty
 	local reducedProp = _binding.reducedMotion
 	local size = _binding.size
+	local hasError = _binding.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local helperText = _binding.helperText
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -69,10 +76,13 @@ local function Select(props)
 	local reducedMotion = useReducedMotion(reducedProp)
 	local styles = useSelectStyles({
 		size = size,
+		hasError = hasError,
+		helperText = helperText,
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local metrics = controlMetrics(theme.density, size)
+	local mark = metrics.icon
 	local row = metrics.height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
@@ -117,7 +127,7 @@ local function Select(props)
 			widest = bounds.X
 		end
 	end
-	local pad = theme.padding.calc(1.5) * 2
+	local pad = fieldChrome(metrics.height, theme.padding.calc(1)).padX * 2
 	local floor = if anchor ~= nil then anchor.AbsoluteSize.X else 0
 	local popupWidth = if #rows == 0 then 0 else selectWidth(widest, pad, floor)
 	local _condition_1 = empty
@@ -281,7 +291,7 @@ local function Select(props)
 		key = "Trigger",
 		ref = setAnchor,
 	}
-	for _k, _v in cx(styles.trigger, current == nil and styles.placeholder, not active and {
+	for _k, _v in cx(styles.trigger, current == nil and styles.placeholder, hasError and styles.errorText, not active and {
 		TextTransparency = 0.5,
 	}) do
 		_attributes_1[_k] = _v
@@ -321,134 +331,166 @@ local function Select(props)
 			return onKey(input, true)
 		end,
 	}
-	local _attributes_2 = table.clone(cx(styles.padding, loading and {
-		PaddingRight = UDim.new(0, theme.padding.calc(1.5) + spinnerPixels(size) + theme.padding.calc(1)),
+	local _attributes_2 = table.clone(cx(styles.padding, {
+		PaddingRight = UDim.new(0, theme.padding.calc(1) + (if loading then spinnerPixels(size) else mark) + theme.padding.calc(1)),
 	}))
 	setmetatable(_attributes_2, nil)
 	local _exp = React.createElement("uipadding", _attributes_2)
 	local _attributes_3 = table.clone(styles.corner)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
-	local _attributes_4 = table.clone(cx(styles.stroke, focused and styles.focusStroke))
+	local _exp_2 = styles.stroke
+	local _condition_3 = focused
+	if _condition_3 then
+		local _result_2
+		if hasError then
+			local _object = table.clone(styles.focusStroke)
+			setmetatable(_object, nil)
+			_object.Color = theme.palette.status.error.main
+			_result_2 = _object
+		else
+			_result_2 = styles.focusStroke
+		end
+		_condition_3 = _result_2
+	end
+	local _attributes_4 = table.clone(cx(_exp_2, _condition_3))
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), loading and (React.createElement(CircularProgress, {
+	local _exp_3 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), if loading then (React.createElement(CircularProgress, {
 		size = spinnerPixels(size),
 		thickness = 2,
 		color = theme.palette.text.secondary,
 		reducedMotion = reducedMotion,
 		className = {
 			AnchorPoint = Vector2.new(1, 0.5),
-			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
+			Position = UDim2.new(1, spinnerPixels(size) + theme.padding.calc(1), 0.5, 0),
+		},
+	})) else (React.createElement(Icon, {
+		id = "Chevron",
+		glyph = "chevronDown",
+		size = mark,
+		tint = theme.palette.text.secondary,
+		className = {
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, mark + theme.padding.calc(1), 0.5, 0),
+			Rotation = if shown then 180 else 0,
 		},
 	})))
-	local _condition_3 = shown
-	if _condition_3 then
+	local _condition_4 = helperText ~= nil
+	if _condition_4 then
 		local _attributes_5 = {
-			key = "Menu",
+			key = "Helper",
 		}
-		for _k, _v in styles.menu do
+		for _k, _v in styles.helper do
 			_attributes_5[_k] = _v
 		end
-		local _exp_3 = React.createElement(Shadow)
-		local _attributes_6 = table.clone(styles.corner)
-		setmetatable(_attributes_6, nil)
-		local _exp_4 = React.createElement("uicorner", _attributes_6)
-		local _attributes_7 = table.clone(styles.stroke)
-		setmetatable(_attributes_7, nil)
-		local _exp_5 = React.createElement("uistroke", _attributes_7)
-		local _exp_6 = React.createElement("uilistlayout", {
-			FillDirection = Enum.FillDirection.Vertical,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		})
-		local _condition_4 = search
-		if _condition_4 then
+		_attributes_5.Text = helperText
+		_condition_4 = React.createElement("textlabel", _attributes_5)
+	end
+	local _attributes_5 = {
+		key = "Menu",
+	}
+	for _k, _v in styles.menu do
+		_attributes_5[_k] = _v
+	end
+	local _exp_4 = React.createElement(Shadow)
+	local _attributes_6 = table.clone(styles.corner)
+	setmetatable(_attributes_6, nil)
+	local _exp_5 = React.createElement("uicorner", _attributes_6)
+	local _attributes_7 = table.clone(styles.stroke)
+	setmetatable(_attributes_7, nil)
+	local _exp_6 = React.createElement("uistroke", _attributes_7)
+	local _exp_7 = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Vertical,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _condition_5 = search
+	if _condition_5 then
+		local _attributes_8 = {
+			key = "Search",
+		}
+		for _k, _v in styles.search do
+			_attributes_8[_k] = _v
+		end
+		_attributes_8.LayoutOrder = 1
+		_condition_5 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
+			text = query,
+			placeholder = "Search",
+			width = UDim.new(1, 0),
+			onInput = function(text)
+				setQuery(text)
+				setHighlight(0)
+			end,
+		})))
+	end
+	return React.createElement(SxHost, _attributes, _exp_3, _condition_4, React.createElement(Popup, {
+		open = shown,
+		anchor = anchor,
+		preferredHeight = menuHeight,
+		preferredWidth = popupWidth,
+		onDismiss = close,
+		onInput = function(input)
+			return onKey(input, true)
+		end,
+	}, React.createElement("frame", _attributes_5, _exp_4, _exp_5, _exp_6, _exp_7, _condition_5, React.createElement("frame", {
+		key = "ListHost",
+		Size = UDim2.new(1, 0, 1, if search then -row else 0),
+		BackgroundTransparency = 1,
+		LayoutOrder = 2,
+	}, React.createElement(VirtualList, {
+		key = "Options",
+		items = rows,
+		getKey = function(row, index)
+			return `{row.kind}-{row.label}-{index}`
+		end,
+		itemHeight = row,
+		listRef = listRef,
+		empty = emptyHint,
+		className = styles.list,
+		renderItem = function(row)
+			if row.kind == "header" then
+				local _attributes_8 = table.clone(styles.group)
+				setmetatable(_attributes_8, nil)
+				_attributes_8.Text = row.label
+				local _attributes_9 = table.clone(styles.padding)
+				setmetatable(_attributes_9, nil)
+				return React.createElement("textlabel", _attributes_8, React.createElement("uipadding", _attributes_9))
+			end
+			local index = row.optionIndex
+			local picked = if values ~= nil then includesChoice(values, filtered[index + 1].value) else filtered[index + 1].value == value
 			local _attributes_8 = {
-				key = "Search",
+				ref = function(button)
+					if button and index == highlight and canFocusGui(button) then
+						GuiService.SelectedObject = button
+					end
+				end,
 			}
-			for _k, _v in styles.search do
+			for _k, _v in cx(styles.option, picked and styles.selected, index == highlight and styles.highlighted, row.disabled == true and styles.disabledOption) do
 				_attributes_8[_k] = _v
 			end
-			_attributes_8.LayoutOrder = 1
-			_condition_4 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
-				text = query,
-				placeholder = "Search",
-				width = UDim.new(1, 0),
-				onInput = function(text)
-					setQuery(text)
-					setHighlight(0)
+			_attributes_8.Text = optionLabel(row.label, picked)
+			_attributes_8.Active = row.disabled ~= true
+			_attributes_8.Selectable = row.disabled ~= true
+			_attributes_8.Event = {
+				Activated = function()
+					return choose(index, true)
 				end,
-			})))
-		end
-		_condition_3 = (React.createElement(Popup, {
-			anchor = anchor,
-			preferredHeight = menuHeight,
-			preferredWidth = popupWidth,
-			onDismiss = close,
-			onInput = function(input)
-				return onKey(input, true)
-			end,
-		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_4, React.createElement("frame", {
-			key = "ListHost",
-			Size = UDim2.new(1, 0, 1, if search then -row else 0),
-			BackgroundTransparency = 1,
-			LayoutOrder = 2,
-		}, React.createElement(VirtualList, {
-			key = "Options",
-			items = rows,
-			getKey = function(row, index)
-				return `{row.kind}-{row.label}-{index}`
-			end,
-			itemHeight = row,
-			listRef = listRef,
-			empty = emptyHint,
-			className = styles.list,
-			renderItem = function(row)
-				if row.kind == "header" then
-					local _attributes_8 = table.clone(styles.group)
-					setmetatable(_attributes_8, nil)
-					_attributes_8.Text = row.label
-					local _attributes_9 = table.clone(styles.padding)
-					setmetatable(_attributes_9, nil)
-					return React.createElement("textlabel", _attributes_8, React.createElement("uipadding", _attributes_9))
-				end
-				local index = row.optionIndex
-				local picked = if values ~= nil then includesChoice(values, filtered[index + 1].value) else filtered[index + 1].value == value
-				local _attributes_8 = {
-					ref = function(button)
-						if button and index == highlight and canFocusGui(button) then
-							GuiService.SelectedObject = button
-						end
-					end,
-				}
-				for _k, _v in cx(styles.option, picked and styles.selected, index == highlight and styles.highlighted, row.disabled == true and styles.disabledOption) do
-					_attributes_8[_k] = _v
-				end
-				_attributes_8.Text = optionLabel(row.label, picked)
-				_attributes_8.Active = row.disabled ~= true
-				_attributes_8.Selectable = row.disabled ~= true
-				_attributes_8.Event = {
-					Activated = function()
-						return choose(index, true)
-					end,
-					MouseEnter = function()
-						if row.disabled ~= true then
-							setHighlight(index)
-						end
-					end,
-					SelectionGained = function()
-						return setHighlight(index)
-					end,
-					InputBegan = function(_, input)
-						return onKey(input, true)
-					end,
-				}
-				local _attributes_9 = table.clone(styles.padding)
-				setmetatable(_attributes_9, nil)
-				return React.createElement("textbutton", _attributes_8, React.createElement("uipadding", _attributes_9))
-			end,
-		})))))
-	end
-	return React.createElement(SxHost, _attributes, _exp_2, _condition_3)
+				MouseEnter = function()
+					if row.disabled ~= true then
+						setHighlight(index)
+					end
+				end,
+				SelectionGained = function()
+					return setHighlight(index)
+				end,
+				InputBegan = function(_, input)
+					return onKey(input, true)
+				end,
+			}
+			local _attributes_9 = table.clone(styles.padding)
+			setmetatable(_attributes_9, nil)
+			return React.createElement("textbutton", _attributes_8, React.createElement("uipadding", _attributes_9))
+		end,
+	})))))
 end
 local default = Select
 return {

package/out/ui/packages/select/components/Select.styles.d.ts

@@ -1,6 +1,8 @@
 import { ControlSize } from "../../../../theme/index";
 export interface SelectStyleProps {
     size?: ControlSize;
+    hasError?: boolean;
+    helperText?: string;
 }
 declare const useSelectStyles: (props: SelectStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSelectStyles;

package/out/ui/packages/select/components/Select.styles.luau

@@ -5,17 +5,25 @@ local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local focusRing = _theme.focusRing
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local useSelectStyles = componentStyles("Select", function(theme, _param)
 	local size = _param.size
+	local hasError = _param.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local helperText = _param.helperText
 	local metrics = controlMetrics(theme.density, size)
+	local chrome = fieldChrome(metrics.height, theme.padding.calc(1))
+	local withHelper = helperText ~= nil
 	return createStyles({
 		root = {
-			Size = UDim2.fromOffset(theme.spacing.calc(12), metrics.height),
+			Size = UDim2.fromOffset(theme.spacing.calc(12), if withHelper then chrome.height + metrics.height else chrome.height),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
 		trigger = {
-			Size = UDim2.fromScale(1, 1),
+			Size = UDim2.new(1, 0, 0, chrome.height),
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -29,8 +37,8 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			TextColor3 = theme.palette.text.secondary,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingLeft = UDim.new(0, chrome.padX),
+			PaddingRight = UDim.new(0, chrome.padX),
 		},
 		menu = {
 			Size = UDim2.fromScale(1, 1),
@@ -89,9 +97,25 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = theme.palette.border,
+			Color = if hasError then theme.palette.status.error.main else theme.palette.border,
+			Transparency = 0,
+			Thickness = 1,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		errorText = {
+			TextColor3 = theme.palette.status.error.main,
+		},
+		helper = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Position = UDim2.new(0, 0, 1, 0),
+			AnchorPoint = Vector2.new(0, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = if hasError then theme.palette.status.error.main else theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
 		focusStroke = focusRing(theme.palette.focus),
 	})
 end)