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

package/out/ui/packages/numberInput/components/numberValue.luau

@@ -23,6 +23,15 @@ end
 local function parseNumberDraft(text, min, max, step)
 	return commitNumber(tonumber(text), min, max, step)
 end
+--* One step up or down. Undefined when the value would not change. 
+local function stepNumber(value, direction, min, max, step)
+	local size = if step ~= nil and step > 0 then step else 1
+	local landed = commitNumber(value + direction * size, min, max, step)
+	if landed == nil or landed == value then
+		return nil
+	end
+	return landed
+end
 local function formatNumber(value, places)
 	if places == nil then
 		places = 4
@@ -70,5 +79,6 @@ end
 return {
 	commitNumber = commitNumber,
 	parseNumberDraft = parseNumberDraft,
+	stepNumber = stepNumber,
 	formatNumber = formatNumber,
 }

package/out/ui/packages/pager/components/Pager.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface PagerProps {
+    index: number;
+    count: number;
+    disabled?: boolean;
+    onChange: (index: number) => void;
+    children?: React.ReactNode;
+}
+declare function Pager(props: CustomizedProps<Frame, PagerProps>): JSX.Element;
+export default Pager;

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

@@ -0,0 +1,112 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+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 usePagerStyles = TS.import(script, script.Parent, "Pager.styles").default
+local _pagerStep = TS.import(script, script.Parent, "pagerStep")
+local pagerLabel = _pagerStep.pagerLabel
+local pagerPlace = _pagerStep.pagerPlace
+local pagerStep = _pagerStep.pagerStep
+local function Pager(props)
+	local _binding = props
+	local index = _binding.index
+	local count = _binding.count
+	local disabled = _binding.disabled
+	local onChange = _binding.onChange
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = usePagerStyles()
+	local place = pagerPlace(index, count)
+	local back = pagerStep(index, count, -1)
+	local forward = pagerStep(index, count, 1)
+	local groupOff = disabled == true
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Pager"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = groupOff,
+	}
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Bar",
+	}
+	for _k, _v in styles.bar do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 0
+	local _attributes_3 = table.clone(styles.barList)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_3)
+	local _attributes_4 = {
+		key = "Back",
+	}
+	for _k, _v in styles.button do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.Text = "Back"
+	_attributes_4.TextTransparency = if groupOff or back == place then 0.5 else 0
+	_attributes_4.Active = canActivate(groupOff or back == place)
+	_attributes_4.LayoutOrder = 0
+	_attributes_4.Event = {
+		Activated = function()
+			if not groupOff and back ~= place then
+				onChange(back)
+			end
+		end,
+	}
+	local _exp_2 = React.createElement("textbutton", _attributes_4)
+	local _attributes_5 = {
+		key = "Count",
+	}
+	for _k, _v in styles.label do
+		_attributes_5[_k] = _v
+	end
+	_attributes_5.Text = pagerLabel(index, count)
+	_attributes_5.LayoutOrder = 1
+	local _exp_3 = React.createElement("textlabel", _attributes_5)
+	local _attributes_6 = {
+		key = "Next",
+	}
+	for _k, _v in styles.button do
+		_attributes_6[_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 = {
+		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 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.LayoutOrder = 1
+	return React.createElement(SxHost, _attributes, _exp, _exp_4, React.createElement("frame", _attributes_7, children))
+end
+local default = Pager
+return {
+	default = default,
+}

package/out/ui/packages/pager/components/Pager.styles.d.ts

@@ -0,0 +1,2 @@
+declare const usePagerStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default usePagerStyles;

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

@@ -0,0 +1,61 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local usePagerStyles = componentStyles("Pager", function(theme)
+	local metrics = controlMetrics(theme.density, "small")
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(2)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		bar = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+		barList = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.calc(2)),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		button = {
+			Size = UDim2.fromOffset(64, metrics.buttonHeight),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			AutoButtonColor = false,
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Size = UDim2.fromScale(0, 0),
+			TextColor3 = theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+	})
+end)
+local default = usePagerStyles
+return {
+	default = default,
+}

package/out/ui/packages/pager/components/pagerStep.d.ts

@@ -0,0 +1,3 @@
+export declare function pagerPlace(index: number, count: number): number;
+export declare function pagerStep(index: number, count: number, delta: number): number;
+export declare function pagerLabel(index: number, count: number): string;

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

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local function pagerPlace(index, count)
+	if count <= 0 or index <= 0 then
+		return 0
+	end
+	if index >= count then
+		return count - 1
+	end
+	return index
+end
+local function pagerStep(index, count, delta)
+	return pagerPlace(pagerPlace(index, count) + delta, count)
+end
+local function pagerLabel(index, count)
+	local place = pagerPlace(index, count)
+	local shown = if count <= 0 then 0 else place + 1
+	local total = if count < 0 then 0 else count
+	return `{shown} / {total}`
+end
+return {
+	pagerPlace = pagerPlace,
+	pagerStep = pagerStep,
+	pagerLabel = pagerLabel,
+}

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

@@ -0,0 +1,3 @@
+export { default as Pager } from "./components/Pager";
+export { PagerProps } from "./components/Pager";
+export { pagerLabel, pagerPlace, pagerStep } from "./components/pagerStep";

package/out/ui/packages/pager/init.luau

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Pager = TS.import(script, script, "components", "Pager").default
+local _pagerStep = TS.import(script, script, "components", "pagerStep")
+exports.pagerLabel = _pagerStep.pagerLabel
+exports.pagerPlace = _pagerStep.pagerPlace
+exports.pagerStep = _pagerStep.pagerStep
+return exports

package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.luau

@@ -6,6 +6,7 @@ local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput"
 local usePhysicalPropertiesEditorStyles = TS.import(script, script.Parent, "PhysicalPropertiesEditor.styles").default
 local _physicalParts = TS.import(script, script.Parent, "physicalParts")
 local patchPhysicalParts = _physicalParts.patchPhysicalParts
+local physicalBounds = _physicalParts.physicalBounds
 local physicalCaption = _physicalParts.physicalCaption
 local physicalRows = _physicalParts.physicalRows
 local function PhysicalPropertiesEditor(props)
@@ -84,8 +85,12 @@ local function PhysicalPropertiesEditor(props)
 			_attributes_7.LayoutOrder = 2
 			return React.createElement("frame", _attributes_4, _exp_3, _exp_4, React.createElement("frame", _attributes_7, React.createElement(NumberInput, {
 				value = amounts[field],
+				min = physicalBounds(field).min,
+				max = physicalBounds(field).max,
+				step = physicalBounds(field).step,
 				places = 4,
 				disabled = disabled,
+				size = "small",
 				width = UDim.new(1, 0),
 				onChange = function(amount)
 					return commit(field, amount)

package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.d.ts

@@ -2,4 +2,9 @@ export type PhysicalField = "Density" | "Friction" | "Elasticity" | "FrictionWei
 export declare function physicalFields(): PhysicalField[];
 export declare function physicalCaption(field: PhysicalField): "Density" | "Friction" | "Elasticity" | "Friction wt" | "Elasticity wt";
 export declare function physicalRows(): PhysicalField[][];
+export declare function physicalBounds(field: PhysicalField): {
+    min: number;
+    max: number;
+    step: number;
+};
 export declare function patchPhysicalParts(density: number, friction: number, elasticity: number, frictionWeight: number, elasticityWeight: number, field: PhysicalField, amount: number): number[];

package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.luau

@@ -14,6 +14,27 @@ end
 local function physicalRows()
 	return { { "Density", "Friction" }, { "Elasticity", "FrictionWeight" }, { "ElasticityWeight" } }
 end
+local function physicalBounds(field)
+	if field == "Density" then
+		return {
+			min = 0.01,
+			max = 100,
+			step = 0.01,
+		}
+	end
+	if field == "Friction" or field == "Elasticity" then
+		return {
+			min = 0,
+			max = 1,
+			step = 0.01,
+		}
+	end
+	return {
+		min = 0,
+		max = 100,
+		step = 0.1,
+	}
+end
 local function patchPhysicalParts(density, friction, elasticity, frictionWeight, elasticityWeight, field, amount)
 	local parts = { density, friction, elasticity, frictionWeight, elasticityWeight }
 	local index = if field == "Density" then 0 elseif field == "Friction" then 1 elseif field == "Elasticity" then 2 elseif field == "FrictionWeight" then 3 else 4
@@ -24,5 +45,6 @@ return {
 	physicalFields = physicalFields,
 	physicalCaption = physicalCaption,
 	physicalRows = physicalRows,
+	physicalBounds = physicalBounds,
 	patchPhysicalParts = patchPhysicalParts,
 }

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

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface PopoverProps {
+    anchor?: GuiObject;
+    open?: boolean;
+    preferredHeight?: number;
+    preferredWidth?: number;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+}
+declare function Popover(props: CustomizedProps<Frame, PopoverProps>): JSX.Element | undefined;
+export default Popover;

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

@@ -0,0 +1,50 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local usePopoverStyles = TS.import(script, script.Parent, "Popover.styles").default
+local function Popover(props)
+	local _binding = props
+	local anchor = _binding.anchor
+	local open = _binding.open
+	local preferredHeight = _binding.preferredHeight
+	local preferredWidth = _binding.preferredWidth
+	local onDismiss = _binding.onDismiss
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = usePopoverStyles()
+	if open ~= true then
+		return nil
+	end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Popover"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.stroke)
+	setmetatable(_attributes_2, nil)
+	return React.createElement(Popup, {
+		anchor = anchor,
+		preferredHeight = preferredHeight,
+		preferredWidth = preferredWidth,
+		onDismiss = onDismiss,
+	}, React.createElement(SxHost, _attributes, _exp, React.createElement("uistroke", _attributes_2), children))
+end
+local default = Popover
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+declare const usePopoverStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default usePopoverStyles;

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

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local usePopoverStyles = componentStyles("Popover", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BorderSizePixel = 0,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+	})
+end)
+local default = usePopoverStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as Popover } from "./components/Popover";
+export { PopoverProps } from "./components/Popover";

package/out/ui/packages/popover/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Popover = TS.import(script, script, "components", "Popover").default
+return exports

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

@@ -5,9 +5,12 @@ export interface ChoiceOption<T> {
     disabled?: boolean;
     group?: string;
 }
+export interface RadioOption<T> extends ChoiceOption<T> {
+    hint?: string;
+}
 export interface RadioGroupProps<T> {
     value: T;
-    options: ChoiceOption<T>[];
+    options: RadioOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
     size?: ControlSize;

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

@@ -1,8 +1,11 @@
 -- 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 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 +30,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",
 	}
@@ -52,6 +59,7 @@ local function RadioGroup(props)
 	local _callback = function(choice, index)
 		local active = canActivate(disabled or choice.disabled)
 		local fade = if active then 0 else 0.5
+		local note = radioHint(choice.hint)
 		local _attributes_2 = {
 			key = `{choice.label}-{index}`,
 		}
@@ -67,6 +75,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 +95,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 +109,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

@@ -4,6 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 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
@@ -78,8 +79,9 @@ local function Rating(props)
 		_attributes_2.Selectable = active
 		_attributes_2.Event = {
 			Activated = function()
-				if active then
-					onChange(if n == value then 0 else n)
+				local landed = ratingCommit(readOnly, onChange, if n == value then 0 else n)
+				if landed ~= nil and onChange ~= nil then
+					onChange(landed)
 				end
 			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;