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

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/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,11 +1,13 @@
 -- 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
 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)
@@ -18,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,
@@ -38,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)
@@ -84,8 +93,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/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/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;
+export default Popover;

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

@@ -0,0 +1,52 @@
+-- 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()
+	local closed = open ~= true
+	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)
+	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, _exp_1, React.createElement("uipadding", _attributes_3), 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,32 @@
+-- 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,
+		},
+		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
+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/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.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;