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

package/out/ui/packages/radioGroup/components/RadioGroup.luau

@@ -1,8 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local controlFade = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").controlFade
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local radioHint = TS.import(script, script.Parent, "radioHint").radioHint
 local useRadioGroupStyles = TS.import(script, script.Parent, "RadioGroup.styles").default
 local function RadioGroup(props)
 	local _binding = props
@@ -27,8 +31,12 @@ local function RadioGroup(props)
 	local ring = _binding_1.ring
 	local dot = _binding_1.dot
 	local stroke = _binding_1.stroke
+	local focus = _binding_1.focus
 	local corner = _binding_1.corner
 	local label = _binding_1.label
+	local hint = _binding_1.hint
+	local notes = _binding_1.notes
+	local focused, setFocused = useState(nil)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -51,7 +59,8 @@ local function RadioGroup(props)
 	local _newValue = table.create(#options)
 	local _callback = function(choice, index)
 		local active = canActivate(disabled or choice.disabled)
-		local fade = if active then 0 else 0.5
+		local fade = if active then 0 else controlFade
+		local note = radioHint(choice.hint)
 		local _attributes_2 = {
 			key = `{choice.label}-{index}`,
 		}
@@ -67,6 +76,16 @@ local function RadioGroup(props)
 					onChange(choice.value)
 				end
 			end,
+			SelectionGained = function()
+				if active then
+					setFocused(index)
+				end
+			end,
+			SelectionLost = function()
+				setFocused(function(current)
+					return if current == index then nil else current
+				end)
+			end,
 		}
 		local _attributes_3 = table.clone(optionRow)
 		setmetatable(_attributes_3, nil)
@@ -77,7 +96,7 @@ local function RadioGroup(props)
 		local _attributes_5 = table.clone(corner)
 		setmetatable(_attributes_5, nil)
 		local _exp_2 = React.createElement("uicorner", _attributes_5)
-		local _attributes_6 = table.clone(stroke)
+		local _attributes_6 = table.clone((if focused == index then focus else stroke))
 		setmetatable(_attributes_6, nil)
 		_attributes_6.Transparency = fade
 		local _exp_3 = React.createElement("uistroke", _attributes_6)
@@ -91,12 +110,37 @@ local function RadioGroup(props)
 			_condition_1 = (React.createElement("frame", _attributes_7, React.createElement("uicorner", _attributes_8)))
 		end
 		local _exp_4 = React.createElement("frame", _attributes_4, _exp_2, _exp_3, _condition_1)
-		local _attributes_7 = table.clone(label)
-		setmetatable(_attributes_7, nil)
-		_attributes_7.Text = choice.label
-		_attributes_7.TextTransparency = fade
-		_attributes_7.LayoutOrder = 2
-		return React.createElement("textbutton", _attributes_2, _exp_1, _exp_4, React.createElement("textlabel", _attributes_7))
+		local _result
+		if note == nil then
+			local _attributes_7 = table.clone(label)
+			setmetatable(_attributes_7, nil)
+			_attributes_7.Text = choice.label
+			_attributes_7.TextTransparency = fade
+			_attributes_7.LayoutOrder = 2
+			_result = (React.createElement("textlabel", _attributes_7))
+		else
+			local _attributes_7 = table.clone(notes)
+			setmetatable(_attributes_7, nil)
+			_attributes_7.LayoutOrder = 2
+			local _exp_5 = React.createElement("uilistlayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 0),
+			})
+			local _attributes_8 = table.clone(label)
+			setmetatable(_attributes_8, nil)
+			_attributes_8.Text = choice.label
+			_attributes_8.TextTransparency = fade
+			_attributes_8.LayoutOrder = 1
+			local _exp_6 = React.createElement("textlabel", _attributes_8)
+			local _attributes_9 = table.clone(hint)
+			setmetatable(_attributes_9, nil)
+			_attributes_9.Text = note
+			_attributes_9.TextTransparency = fade
+			_attributes_9.LayoutOrder = 2
+			_result = (React.createElement("frame", _attributes_7, _exp_5, _exp_6, React.createElement("textlabel", _attributes_9)))
+		end
+		return React.createElement("textbutton", _attributes_2, _exp_1, _exp_4, _result)
 	end
 	for _k, _v in options do
 		_newValue[_k] = _callback(_v, _k - 1, options)

package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau

@@ -4,11 +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 focusRing = _theme.focusRing
 local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param)
 	local size = _param.size
 	local row = _param.row
 	local metrics = controlMetrics(theme.density, size)
-	return createStyles({
+	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
@@ -50,6 +51,7 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			Color = theme.palette.text.primary,
 			Thickness = 1,
 		},
+		focus = focusRing(theme.palette.focus),
 		corner = {
 			CornerRadius = UDim.new(1, 0),
 		},
@@ -61,7 +63,29 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			Font = theme.typography.fontFamilies.default,
 			TextSize = metrics.font,
 		},
-	})
+	}
+	local _left = "hint"
+	local _object_1 = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = metrics.font
+	end
+	_object_1[_left_1] = _condition
+	_object[_left] = _object_1
+	_object.notes = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	return createStyles(_object)
 end)
 local default = useRadioGroupStyles
 return {

package/out/ui/packages/radioGroup/components/radioHint.d.ts

@@ -0,0 +1,2 @@
+/** An empty note stays off the option. */
+export declare function radioHint(hint?: string): string | undefined;

package/out/ui/packages/radioGroup/components/radioHint.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty note stays off the option. 
+local function radioHint(hint)
+	if hint == nil or hint == "" then
+		return nil
+	end
+	return hint
+end
+return {
+	radioHint = radioHint,
+}

package/out/ui/packages/radioGroup/index.d.ts

@@ -1,2 +1,2 @@
 export { default as RadioGroup } from "./components/RadioGroup";
-export { RadioGroupProps, ChoiceOption } from "./components/RadioGroup";
+export { RadioGroupProps, ChoiceOption, RadioOption } from "./components/RadioGroup";

package/out/ui/packages/rating/components/Rating.d.ts

@@ -5,7 +5,7 @@ export interface RatingProps {
     size?: ControlSize;
     disabled?: boolean;
     readOnly?: boolean;
-    onChange: (value: number) => void;
+    onChange?: (value: number) => void;
 }
 declare function Rating(props: CustomizedProps<Frame, RatingProps>): JSX.Element;
 export default Rating;

package/out/ui/packages/rating/components/Rating.luau

@@ -1,9 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local focusRing = _theme.focusRing
+local useTheme = _theme.useTheme
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local ratingCommit = TS.import(script, script.Parent, "ratingCommit").ratingCommit
 local useRatingStyles = TS.import(script, script.Parent, "Rating.styles").default
 local function Rating(props)
 	local _binding = props
@@ -27,7 +34,11 @@ local function Rating(props)
 		disabled = disabled,
 		size = size,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local active = canActivate(disabled) and readOnly ~= true
+	local hover, setHover = useState(0)
+	local focused, setFocused = useState(0)
 	local stars = {}
 	do
 		local i = 1
@@ -59,6 +70,13 @@ local function Rating(props)
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
+		hover = hover > 0,
+		focused = focused > 0,
+	}
+	_attributes.Event = {
+		MouseLeave = function()
+			return setHover(0)
+		end,
 	}
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
@@ -66,24 +84,50 @@ local function Rating(props)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#stars)
 	local _callback = function(n)
+		local filled = n <= value
+		local preview = active and hover > 0 and n <= hover and not filled
 		local _attributes_2 = {
 			key = `Star-{n}`,
 		}
 		for _k, _v in styles.star do
 			_attributes_2[_k] = _v
 		end
-		_attributes_2.Image = tostring(if n <= value then Icons.StarFilled else Icons.Star)
+		_attributes_2.Image = tostring(if filled or (active and hover >= n) then Icons.StarFilled else Icons.Star)
+		_attributes_2.ImageColor3 = if filled then theme.palette.primary.main elseif preview then theme.palette.primary.hover else theme.palette.text.secondary
+		_attributes_2.ImageTransparency = if disabled == true then controlFade else 0
 		_attributes_2.LayoutOrder = n
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active
 		_attributes_2.Event = {
 			Activated = function()
+				local landed = ratingCommit(readOnly, onChange, if n == value then 0 else n)
+				if landed ~= nil and onChange ~= nil then
+					onChange(landed)
+				end
+			end,
+			MouseEnter = function()
+				if active then
+					setHover(n)
+				end
+			end,
+			SelectionGained = function()
 				if active then
-					onChange(if n == value then 0 else n)
+					setFocused(n)
 				end
 			end,
+			SelectionLost = function()
+				return setFocused(0)
+			end,
 		}
-		return React.createElement("imagebutton", _attributes_2)
+		local _result
+		if focused == n and active then
+			local _attributes_3 = table.clone(focusRing(theme.palette.focus))
+			setmetatable(_attributes_3, nil)
+			_result = React.createElement("uistroke", _attributes_3)
+		else
+			_result = nil
+		end
+		return React.createElement("imagebutton", _attributes_2, _result)
 	end
 	for _k, _v in stars do
 		_newValue[_k] = _callback(_v, _k - 1, stars)

package/out/ui/packages/rating/components/Rating.styles.luau

@@ -34,7 +34,7 @@ local useRatingStyles = componentStyles("Rating", function(theme, _param)
 			AutoButtonColor = false,
 			Active = not disabled,
 			Selectable = not disabled,
-			ImageColor3 = if disabled then theme.palette.text.disabled else theme.palette.primary.main,
+			ImageColor3 = theme.palette.primary.main,
 		},
 	})
 end)

package/out/ui/packages/rating/components/ratingCommit.d.ts

@@ -0,0 +1,2 @@
+/** Clicks commit only when the rating is editable and a handler was passed. */
+export declare function ratingCommit(readOnly: boolean | undefined, onChange: ((value: number) => void) | undefined, landed: number): number | undefined;

package/out/ui/packages/rating/components/ratingCommit.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Clicks commit only when the rating is editable and a handler was passed. 
+local function ratingCommit(readOnly, onChange, landed)
+	if readOnly == true or onChange == nil then
+		return nil
+	end
+	return landed
+end
+return {
+	ratingCommit = ratingCommit,
+}

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/scroll/components/ScrollView.luau

@@ -1,8 +1,30 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local function isPadKey(key)
+	return key == "p" or key == "px" or key == "py" or key == "pt" or key == "pr" or key == "pb" or key == "pl" or key == "padding"
+end
+--* Padding on a scrolling frame offsets scale-sized children without shrinking them. 
+local function withoutPad(sx)
+	if sx == nil then
+		return nil
+	end
+	local rest = {}
+	local kept = false
+	for key, value in pairs(sx) do
+		local name = tostring(key)
+		if isPadKey(name) then
+			continue
+		end
+		rest[name] = value
+		kept = true
+	end
+	return if kept then rest else nil
+end
 local function ScrollView(props)
 	local _binding = props
 	local children = _binding.children
@@ -22,19 +44,66 @@ local function ScrollView(props)
 		ScrollBarThickness = theme.spacing.calc(0.5),
 		ScrollBarImageColor3 = theme.palette.text.secondary,
 	}
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = left + right + top + bottom > 0
 	local _attributes = {
 		tag = "scrollingframe",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ScrollView"
+	local _condition_4 = id
+	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4 ~= "" and _condition_4) then
+		_condition_4 = "ScrollView"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_4
 	_attributes.hostRef = ref
 	_attributes.base = root
 	_attributes.className = className
-	_attributes.sx = sx
-	return React.createElement(SxHost, _attributes, children)
+	_attributes.sx = withoutPad(sx)
+	return React.createElement(SxHost, _attributes, if inset then (React.createElement("frame", {
+		key = "Pad",
+		Size = UDim2.new(1, -(left + right), 0, 0),
+		Position = UDim2.new(0, left, 0, top),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, bottom),
+	}), children)) else children)
 end
 local default = ScrollView
 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;