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

package/out/ui/packages/numberRangeEditor/components/NumberRangeEditor.styles.luau

@@ -3,8 +3,12 @@ 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 editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useNumberRangeEditorStyles = componentStyles("NumberRangeEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,27 +17,30 @@ local useNumberRangeEditorStyles = componentStyles("NumberRangeEditor", function
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		axis = {
-			Size = UDim2.new(0.5, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(0.5, 0, 0, editorRowHeight(theme)),
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		field = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.field = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useNumberRangeEditorStyles
 return {

package/out/ui/packages/pager/components/Pager.luau

@@ -78,33 +78,35 @@ local function Pager(props)
 	end
 	_attributes_5.Text = pagerLabel(index, count)
 	_attributes_5.LayoutOrder = 1
-	local _exp_3 = React.createElement("textlabel", _attributes_5)
-	local _attributes_6 = {
+	local _attributes_6 = table.clone(styles.labelCap)
+	setmetatable(_attributes_6, nil)
+	local _exp_3 = React.createElement("textlabel", _attributes_5, React.createElement("uisizeconstraint", _attributes_6))
+	local _attributes_7 = {
 		key = "Next",
 	}
 	for _k, _v in styles.button do
-		_attributes_6[_k] = _v
+		_attributes_7[_k] = _v
 	end
-	_attributes_6.Text = "Next"
-	_attributes_6.TextTransparency = if groupOff or forward == place then 0.5 else 0
-	_attributes_6.Active = canActivate(groupOff or forward == place)
-	_attributes_6.LayoutOrder = 2
-	_attributes_6.Event = {
+	_attributes_7.Text = "Next"
+	_attributes_7.TextTransparency = if groupOff or forward == place then 0.5 else 0
+	_attributes_7.Active = canActivate(groupOff or forward == place)
+	_attributes_7.LayoutOrder = 2
+	_attributes_7.Event = {
 		Activated = function()
 			if not groupOff and forward ~= place then
 				onChange(forward)
 			end
 		end,
 	}
-	local _exp_4 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _exp_3, React.createElement("textbutton", _attributes_6))
-	local _attributes_7 = {
+	local _exp_4 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _exp_3, React.createElement("textbutton", _attributes_7))
+	local _attributes_8 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_7[_k] = _v
+		_attributes_8[_k] = _v
 	end
-	_attributes_7.LayoutOrder = 1
-	return React.createElement(SxHost, _attributes, _exp, _exp_4, React.createElement("frame", _attributes_7, children))
+	_attributes_8.LayoutOrder = 1
+	return React.createElement(SxHost, _attributes, _exp, _exp_4, React.createElement("frame", _attributes_8, children))
 end
 local default = Pager
 return {

package/out/ui/packages/pager/components/Pager.styles.luau

@@ -46,6 +46,11 @@ local usePagerStyles = componentStyles("Pager", function(theme)
 			TextColor3 = theme.palette.text.secondary,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
+		},
+		labelCap = {
+			MaxSize = Vector2.new(theme.spacing.calc(10), math.huge),
 		},
 		body = {
 			AutomaticSize = Enum.AutomaticSize.XY,

package/out/ui/packages/pagination/components/Pagination.styles.luau

@@ -24,7 +24,7 @@ local usePaginationStyles = componentStyles("Pagination", function(theme, _param
 		},
 		list = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(if size == "small" then 0.25 else 0.5)),
+			Padding = UDim.new(0, theme.padding.calc(if size == "small" then 0.5 else 1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		page = {
@@ -36,10 +36,13 @@ local usePaginationStyles = componentStyles("Pagination", function(theme, _param
 			Font = theme.typography.fontFamilies.default,
 			TextSize = text,
 			TextColor3 = theme.palette.text.primary,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextXAlignment = Enum.TextXAlignment.Center,
 		},
 		selected = {
 			BackgroundColor3 = theme.palette.action.selected,
 			BackgroundTransparency = 0,
+			TextColor3 = theme.palette.text.primary,
 		},
 		stroke = {
 			Color = theme.palette.border,

package/out/ui/packages/paper/components/Paper.luau

@@ -30,22 +30,28 @@ local function Paper(props)
 	_attributes.className = className
 	_attributes.sx = sx
 	local _exp = elevation == "raised" and React.createElement(Shadow)
-	local _attributes_1 = table.clone(styles.padding)
-	setmetatable(_attributes_1, nil)
-	local _exp_1 = React.createElement("uipadding", _attributes_1)
+	local _attributes_1 = {
+		key = "Content",
+	}
+	for _k, _v in styles.content do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = table.clone(styles.padding)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("frame", _attributes_1, React.createElement("uipadding", _attributes_2), children)
 	local _condition_1 = square ~= true
 	if _condition_1 then
-		local _attributes_2 = table.clone(styles.corner)
-		setmetatable(_attributes_2, nil)
-		_condition_1 = React.createElement("uicorner", _attributes_2)
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_3)
 	end
-	local _condition_2 = elevation == "outlined"
+	local _condition_2 = elevation ~= "raised"
 	if _condition_2 then
-		local _attributes_2 = table.clone(styles.stroke)
-		setmetatable(_attributes_2, nil)
-		_condition_2 = React.createElement("uistroke", _attributes_2)
+		local _attributes_3 = table.clone(styles.stroke)
+		setmetatable(_attributes_3, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_3)
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1, _condition_2, children)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1, _condition_2)
 end
 local default = Paper
 return {

package/out/ui/packages/paper/components/Paper.styles.luau

@@ -8,6 +8,7 @@ local usePaperStyles = componentStyles("Paper", function(theme, _param)
 	if elevation == nil then
 		elevation = "flat"
 	end
+	local pad = theme.spacing.calc(2)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -16,16 +17,22 @@ local usePaperStyles = componentStyles("Paper", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		stroke = {
-			Color = theme.palette.border,
+			Color = if elevation == "outlined" then theme.palette.border else theme.palette.divider,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 			Thickness = 1,
 			Transparency = 0,
 		},
+		content = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(2)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+			PaddingTop = UDim.new(0, pad),
+			PaddingBottom = UDim.new(0, pad),
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.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 usePhysicalPropertiesEditorStyles = TS.import(script, script.Parent, "PhysicalPropertiesEditor.styles").default
@@ -19,6 +20,7 @@ local function PhysicalPropertiesEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = usePhysicalPropertiesEditorStyles()
+	local hover = useEditorHover(disabled)
 	local amounts = {
 		Density = value.Density,
 		Friction = value.Friction,
@@ -39,12 +41,18 @@ local function PhysicalPropertiesEditor(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/physicalPropertiesEditor/components/PhysicalPropertiesEditor.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 usePhysicalPropertiesEditorStyles = componentStyles("PhysicalPropertiesEditor", 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,7 +18,7 @@ local usePhysicalPropertiesEditorStyles = componentStyles("PhysicalPropertiesEdi
 		},
 		wrap = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, gap),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		pair = {
@@ -35,24 +38,26 @@ local usePhysicalPropertiesEditorStyles = componentStyles("PhysicalPropertiesEdi
 		},
 		stack = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, gap),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		label = {
-			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 = "label"
+	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.field = {
+		Size = UDim2.new(1, 0, 0, controlMetrics(theme.density).height),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = usePhysicalPropertiesEditorStyles
 return {

package/out/ui/packages/popover/components/Popover.d.ts

@@ -8,5 +8,5 @@ export interface PopoverProps {
     onDismiss?: () => void;
     children?: React.ReactNode;
 }
-declare function Popover(props: CustomizedProps<Frame, PopoverProps>): JSX.Element | undefined;
+declare function Popover(props: CustomizedProps<Frame, PopoverProps>): JSX.Element;
 export default Popover;

package/out/ui/packages/popover/components/Popover.luau

@@ -17,9 +17,7 @@ local function Popover(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = usePopoverStyles()
-	if open ~= true then
-		return nil
-	end
+	local closed = open ~= true
 	local _attributes = {
 		tag = "frame",
 	}
@@ -37,12 +35,16 @@ local function Popover(props)
 	local _exp = React.createElement("uicorner", _attributes_1)
 	local _attributes_2 = table.clone(styles.stroke)
 	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
 	return React.createElement(Popup, {
+		open = not closed,
 		anchor = anchor,
 		preferredHeight = preferredHeight,
 		preferredWidth = preferredWidth,
 		onDismiss = onDismiss,
-	}, React.createElement(SxHost, _attributes, _exp, React.createElement("uistroke", _attributes_2), children))
+	}, React.createElement(SxHost, _attributes, _exp, _exp_1, React.createElement("uipadding", _attributes_3), children))
 end
 local default = Popover
 return {

package/out/ui/packages/popover/components/Popover.styles.luau

@@ -18,6 +18,12 @@ local usePopoverStyles = componentStyles("Popover", function(theme)
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.spacing.calc(2)),
+			PaddingBottom = UDim.new(0, theme.spacing.calc(2)),
+			PaddingLeft = UDim.new(0, theme.spacing.calc(2)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(2)),
+		},
 	})
 end)
 local default = usePopoverStyles

package/out/ui/packages/popup/components/Popup.d.ts

@@ -6,6 +6,8 @@ export interface PopupProps {
     preferredHeight?: number;
     /** Content width. Falls back to the anchor width. Clamped to the layer. */
     preferredWidth?: number;
+    /** Stays mounted through the close tween. Omit to show while the parent renders it. */
+    open?: boolean;
     onDismiss?: () => void;
     onInput?: (input: InputObject) => void;
     children?: React.ReactNode;

package/out/ui/packages/popup/components/Popup.luau

@@ -5,15 +5,45 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
+local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local motionDuration = TS.import(script, script.Parent.Parent.Parent, "motion", "duration").motionDuration
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local popupPlacement = TS.import(script, script.Parent, "placement").popupPlacement
 local Portal = TS.import(script, script.Parent, "Portal").default
 local portalTarget = TS.import(script, script.Parent, "portalTarget").portalTarget
+local function MotionScale(props)
+	local ref = useRef()
+	local reduced = useReducedMotion()
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local open = props.open
+	useEffect(function()
+		local scale = ref.current
+		if not scale then
+			return nil
+		end
+		if open and not reduced then
+			scale.Scale = 0.96
+		end
+		local seconds = if open then theme.motion.default else theme.motion.fast
+		local stop = playProperty(scale, {
+			Scale = if open then 1 else 0.96,
+		}, seconds, reduced)
+		return stop
+	end, { open, reduced, theme })
+	return React.createElement("uiscale", {
+		key = "Motion",
+		ref = ref,
+	})
+end
 local function Popup(props)
 	local _binding = props
 	local anchor = _binding.anchor
 	local preferredHeight = _binding.preferredHeight
 	local preferredWidth = _binding.preferredWidth
+	local open = _binding.open
 	local onDismiss = _binding.onDismiss
 	local onInput = _binding.onInput
 	local children = _binding.children
@@ -21,6 +51,36 @@ local function Popup(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local visible = open ~= false
+	local held, setHeld = useState(visible)
+	local reduced = useReducedMotion()
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	useEffect(function()
+		if visible then
+			setHeld(true)
+		end
+	end, { visible })
+	useEffect(function()
+		if not held or visible then
+			return nil
+		end
+		local delay = motionDuration(theme.motion.fast, reduced)
+		if delay == 0 then
+			setHeld(false)
+			return nil
+		end
+		local alive = true
+		local thread = task.delay(delay, function()
+			if alive then
+				setHeld(false)
+			end
+		end)
+		return function()
+			alive = false
+			task.cancel(thread)
+		end
+	end, { visible, held, reduced, theme })
 	local dismiss = useRef(onDismiss)
 	dismiss.current = onDismiss
 	local _, bump = useState(0)
@@ -72,7 +132,7 @@ local function Popup(props)
 			return nil
 		end
 	end, { anchor, layer })
-	if not anchor or not layer then
+	if not held or not anchor or not layer then
 		return nil
 	end
 	local _exp = anchor.AbsolutePosition.X
@@ -140,7 +200,9 @@ local function Popup(props)
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
 		ZIndex = 20000,
-	}, _exp_8, React.createElement(SxHost, _attributes, children)))
+	}, _exp_8, React.createElement(SxHost, _attributes, React.createElement(MotionScale, {
+		open = visible,
+	}), children)))
 end
 local default = Popup
 return {

package/out/ui/packages/popup/components/placement.luau

@@ -11,9 +11,11 @@ local function popupPlacement(anchorX, anchorY, anchorW, anchorH, layerX, layerY
 	end
 	local localX = anchorX - layerX
 	local localY = anchorY - layerY
-	local spaceAbove = math.max(0, localY)
-	local spaceBelow = math.max(0, layerH - (localY + anchorH))
-	local above = contentH > spaceBelow and spaceAbove > spaceBelow
+	local top = math.clamp(localY, 0, layerH)
+	local bottom = math.clamp(localY + anchorH, 0, layerH)
+	local spaceAbove = top
+	local spaceBelow = math.max(0, layerH - bottom)
+	local above = spaceAbove > spaceBelow and (contentH == 0 or contentH > spaceBelow)
 	local maxHeight = if above then spaceAbove else spaceBelow
 	local width = if contentW > 0 then contentW else anchorW
 	if width > layerW then
@@ -29,7 +31,7 @@ local function popupPlacement(anchorX, anchorY, anchorW, anchorH, layerX, layerY
 	local height = if contentH > 0 then math.min(contentH, maxHeight) else 0
 	return {
 		x = x,
-		y = if above then localY else localY + anchorH,
+		y = if above then top else bottom,
 		width = width,
 		height = height,
 		maxHeight = maxHeight,

package/out/ui/packages/progressBar/components/ProgressBar.luau

@@ -101,7 +101,7 @@ local function ProgressBar(props)
 		_attributes_6[_k] = _v
 	end
 	_attributes_6.Size = UDim2.new(unit, 0, 1, 0)
-	_attributes_6.BackgroundColor3 = color or theme.palette.text.primary
+	_attributes_6.BackgroundColor3 = color or theme.palette.primary.main
 	_attributes_6.BackgroundTransparency = if disabled then 0.55 else 0
 	local _attributes_7 = {
 		key = "Corner",

package/out/ui/packages/progressBar/components/ProgressBar.styles.luau

@@ -24,7 +24,8 @@ local useProgressBarStyles = componentStyles("ProgressBar", function(theme)
 			Size = UDim2.new(1, -theme.options.constants.borders.divider * 2, 1, -theme.options.constants.borders.divider * 2),
 			Position = UDim2.new(0.5, 0, 0.5, 0),
 			AnchorPoint = Vector2.new(0.5, 0.5),
-			BackgroundTransparency = 1,
+			BackgroundColor3 = theme.palette.surface.input,
+			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 			ClipsDescendants = true,
 			ZIndex = 110001,
@@ -32,7 +33,7 @@ local useProgressBarStyles = componentStyles("ProgressBar", function(theme)
 		fill = {
 			Position = UDim2.new(0, 0, 0.5, 0),
 			AnchorPoint = Vector2.new(0, 0.5),
-			BackgroundColor3 = theme.palette.text.primary,
+			BackgroundColor3 = theme.palette.primary.main,
 			BorderSizePixel = 0,
 			ZIndex = 110001,
 		},

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

@@ -3,6 +3,7 @@ local TS = _G[script]
 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
@@ -58,7 +59,7 @@ 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}`,

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

@@ -1,6 +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 _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
@@ -28,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
@@ -60,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)
@@ -67,13 +84,17 @@ 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
@@ -84,8 +105,29 @@ local function Rating(props)
 					onChange(landed)
 				end
 			end,
+			MouseEnter = function()
+				if active then
+					setHover(n)
+				end
+			end,
+			SelectionGained = function()
+				if active then
+					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)