@rbxts/react-clean-ui 1.0.38 → 1.1.0

package/out/Components/Decorator/Corners.luau

@@ -6,8 +6,12 @@ local function Corners(props)
 	if props.radius == nil then
 		return nil
 	end
+	local radius = SizeHelper:toUDim(props.radius)
+	if radius.Scale == 0 and radius.Offset == 0 then
+		return nil
+	end
 	return React.createElement("uicorner", {
-		CornerRadius = SizeHelper:toUDim(props.radius),
+		CornerRadius = radius,
 	})
 end
 return {

package/out/Components/Decorator/Padding.luau

@@ -5,7 +5,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function Padding(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = if props.resolvedPadding ~= nil then props.resolvedPadding else SpacingHelper:GetResolvedPadding(theme, props)
+	local padding = SpacingHelper:GetResolvedPadding(theme, props)
 	return React.createElement("uipadding", {
 		PaddingTop = UDim.new(0, padding.top),
 		PaddingBottom = UDim.new(0, padding.bottom),

package/out/Components/Input/Checkbox.luau

@@ -83,7 +83,7 @@ local function Checkbox(props)
 	_attributes_1.Transparency = _condition_2
 	_attributes_1.Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor
 	return React.createElement("imagebutton", _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing, theme.components.checkbox.padding),
 	}), React.createElement(Icon, {
 		scale = props.scale,
 		icon = if checked then props["icon-checked"] or "check" else props["icon-unchecked"],

package/out/Components/Input/Input.luau

@@ -12,7 +12,9 @@ local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
 local Padding = _Decorator.Padding
 local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
-local resolveValidatedText = TS.import(script, script.Parent, "Input.validation").resolveValidatedText
+local _Input_validation = TS.import(script, script.Parent, "Input.validation")
+local resolveClampedText = _Input_validation.resolveClampedText
+local resolveValidatedText = _Input_validation.resolveValidatedText
 local function Input(props)
 	local theme = React.useContext(CleanThemeContext)
 	local fieldset = React.useContext(FieldsetContext)
@@ -117,26 +119,14 @@ local function Input(props)
 		end
 	end
 	_object.FocusLost = function(rbx, enterPressed, inputThatCausedFocusLoss)
-		if props.validation == "Number" or props.validation == "Int" then
-			local number = tonumber(rbx.Text)
-			if number ~= nil then
-				local clamped = number
-				if props.min ~= nil and clamped < props.min then
-					clamped = props.min
-				end
-				if props.max ~= nil and clamped > props.max then
-					clamped = props.max
-				end
-				if clamped ~= number then
-					local clampedText = tostring(clamped)
-					ref.current.Text = clampedText
-					lastValidText.current = clampedText
-					setValue(clampedText)
-					local _result = props.onChange
-					if _result ~= nil then
-						_result(clampedText)
-					end
-				end
+		local clampedText = resolveClampedText(props.validation, rbx.Text, props.min, props.max)
+		if clampedText ~= nil then
+			ref.current.Text = clampedText
+			lastValidText.current = clampedText
+			setValue(clampedText)
+			local _result = props.onChange
+			if _result ~= nil then
+				_result(clampedText)
 			end
 		end
 		local _result = props.Event

package/out/Components/Input/Input.validation.d.ts

@@ -1,3 +1,4 @@
 import { InputProps } from "./Input";
 export declare const CHARACTER_ALLOW_LIST_PATTERNS: Partial<Record<NonNullable<InputProps["validation"]>, string>>;
 export declare function resolveValidatedText(validation: InputProps["validation"], candidateText: string, lastValidText: string): string;
+export declare function resolveClampedText(validation: InputProps["validation"], text: string, min: number | undefined, max: number | undefined): string | undefined;

package/out/Components/Input/Input.validation.luau

@@ -15,7 +15,28 @@ local function resolveValidatedText(validation, candidateText, lastValidText)
 	end
 	return candidateText
 end
+local function resolveClampedText(validation, text, min, max)
+	if validation ~= "Number" and validation ~= "Int" then
+		return nil
+	end
+	local number = tonumber(text)
+	if number == nil then
+		return nil
+	end
+	local clamped = number
+	if min ~= nil and clamped < min then
+		clamped = min
+	end
+	if max ~= nil and clamped > max then
+		clamped = max
+	end
+	if clamped == number then
+		return nil
+	end
+	return tostring(clamped)
+end
 return {
 	resolveValidatedText = resolveValidatedText,
+	resolveClampedText = resolveClampedText,
 	CHARACTER_ALLOW_LIST_PATTERNS = CHARACTER_ALLOW_LIST_PATTERNS,
 }

package/out/Components/Layout/Accordion.d.ts

@@ -1,18 +1,18 @@
 import React from "@rbxts/react";
-import { IconName, ScalableElementProps } from "../../Interfaces";
+import { IconName, PaddingProps, ScalableElementProps } from "../../Interfaces";
 interface AccordionItemProps {
     children?: React.ReactNode;
     value: string;
     disabled?: boolean;
 }
 declare function AccordionItem(_props: AccordionItemProps): undefined;
-interface AccordionHeaderProps {
+interface AccordionHeaderProps extends PaddingProps {
     children?: React.ReactNode | string;
     icon?: IconName;
     text?: string;
 }
 declare function AccordionHeader(_props: AccordionHeaderProps): undefined;
-interface AccordionContentProps {
+interface AccordionContentProps extends PaddingProps {
     children?: React.ReactNode;
     text?: string;
 }

package/out/Components/Layout/Accordion.luau

@@ -5,6 +5,7 @@ local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple"
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
 local SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
@@ -75,7 +76,7 @@ local function AccordionHeaderVisual(props)
 		return props.header.children
 	end
 	local _exp = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.accordion.header.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.header, theme.components.accordion.header.spacing, theme.components.accordion.header.padding),
 	})
 	local _exp_1 = props.header.icon ~= nil and React.createElement(Icon, {
 		icon = props.header.icon,
@@ -117,6 +118,43 @@ local function RenderedAccordionItem(props)
 	local height, heightTween = useTween(0, {
 		duration = props.duration,
 	})
+	local contentRef = React.useRef()
+	local onContentSizeRef = React.useRef()
+	onContentSizeRef.current = function(instance)
+		if props.open then
+			heightTween:setGoal(instance.AbsoluteSize.Y, {
+				duration = props.duration,
+			})
+			if props.duration == 0 then
+				heightTween:setPosition(instance.AbsoluteSize.Y)
+			end
+			heightTween:start()
+		end
+	end
+	React.useEffect(function()
+		local frame = contentRef.current
+		if not frame then
+			return nil
+		end
+		-- Some renderers (e.g. the browser-based Loom scene preview) don't back
+		-- this ref with an instance that supports property-changed signals, so
+		-- guard the subscription instead of throwing and losing height tracking.
+		local conn
+		pcall(function()
+			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+				local _result = onContentSizeRef.current
+				if _result ~= nil then
+					_result(frame)
+				end
+			end)
+		end)
+		return function()
+			local _result = conn
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, { mounted })
 	React.useEffect(function()
 		if props.open then
 			setMounted(true)
@@ -148,6 +186,9 @@ local function RenderedAccordionItem(props)
 	local defaultColors = ColorHelper:getIntentColors(theme, "primary", if props.disabled then "disabled" else "default", theme.components.accordion.header.intents)
 	local hoverColors = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.accordion.header.intents)
 	local focusColors = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.accordion.header.intents)
+	local defaultBackgroundImage = CssHelper:resolveBackgroundImage(defaultColors.backgroundImage)
+	local hoverBackgroundImage = CssHelper:resolveBackgroundImage(hoverColors.backgroundImage)
+	local focusBackgroundImage = CssHelper:resolveBackgroundImage(focusColors.backgroundImage)
 	local _condition = not props.first
 	if _condition then
 		local _attributes = {
@@ -169,7 +210,6 @@ local function RenderedAccordionItem(props)
 		AutoButtonColor = false,
 		AutomaticSize = Enum.AutomaticSize.Y,
 		Size = UDim2.fromScale(1, 0),
-		ImageTransparency = 1,
 		BackgroundColor3 = defaultColors.backgroundColor,
 	}
 	local _left = "BackgroundTransparency"
@@ -179,6 +219,13 @@ local function RenderedAccordionItem(props)
 	end
 	_object[_left] = _condition_1
 	_object.BorderSizePixel = 0
+	_object.Image = defaultBackgroundImage.Image
+	_object.ImageColor3 = defaultBackgroundImage.ImageColor3
+	_object.ImageTransparency = defaultBackgroundImage.ImageTransparency
+	_object.ScaleType = defaultBackgroundImage.ScaleType
+	_object.SliceCenter = defaultBackgroundImage.SliceCenter
+	_object.SliceScale = defaultBackgroundImage.SliceScale
+	_object.TileSize = defaultBackgroundImage.TileSize
 	_object.Event = {
 		Activated = props.onActivate,
 	}
@@ -192,6 +239,13 @@ local function RenderedAccordionItem(props)
 		_condition_2 = 0
 	end
 	_object_1[_left_1] = _condition_2
+	_object_1.Image = hoverBackgroundImage.Image
+	_object_1.ImageColor3 = hoverBackgroundImage.ImageColor3
+	_object_1.ImageTransparency = hoverBackgroundImage.ImageTransparency
+	_object_1.ScaleType = hoverBackgroundImage.ScaleType
+	_object_1.SliceCenter = hoverBackgroundImage.SliceCenter
+	_object_1.SliceScale = hoverBackgroundImage.SliceScale
+	_object_1.TileSize = hoverBackgroundImage.TileSize
 	_attributes.hover = _object_1
 	local _object_2 = {
 		BackgroundColor3 = focusColors.backgroundColor,
@@ -202,6 +256,13 @@ local function RenderedAccordionItem(props)
 		_condition_3 = 0
 	end
 	_object_2[_left_2] = _condition_3
+	_object_2.Image = focusBackgroundImage.Image
+	_object_2.ImageColor3 = focusBackgroundImage.ImageColor3
+	_object_2.ImageTransparency = focusBackgroundImage.ImageTransparency
+	_object_2.ScaleType = focusBackgroundImage.ScaleType
+	_object_2.SliceCenter = focusBackgroundImage.SliceCenter
+	_object_2.SliceScale = focusBackgroundImage.SliceScale
+	_object_2.TileSize = focusBackgroundImage.TileSize
 	_attributes.focus = _object_2
 	return React.createElement(Container, {
 		width = "100%",
@@ -226,25 +287,13 @@ local function RenderedAccordionItem(props)
 			return _exp + _arg0
 		end),
 	}, React.createElement("frame", {
+		ref = contentRef,
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
-		Change = {
-			AbsoluteSize = function(instance)
-				if props.open then
-					heightTween:setGoal(instance.AbsoluteSize.Y, {
-						duration = props.duration,
-					})
-					if props.duration == 0 then
-						heightTween:setPosition(instance.AbsoluteSize.Y)
-					end
-					heightTween:start()
-				end
-			end,
-		},
 	}, React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.accordion.content.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.contentProps, theme.components.accordion.content.spacing, theme.components.accordion.content.padding),
 	}), if props.contentText ~= nil then React.createElement(Text, {
 		text = props.contentText,
 	}) else props.content)))))
@@ -264,6 +313,7 @@ local Accordion = React.forwardRef(function(props, ref)
 				return nil
 			end
 			local header
+			local contentProps
 			local contentText
 			local content
 			React.Children.forEach(item.props.children, function(itemChild)
@@ -274,7 +324,7 @@ local Accordion = React.forwardRef(function(props, ref)
 					header = itemChild.props
 				end
 				if itemChild.type == AccordionContent and content == nil then
-					local contentProps = itemChild.props
+					contentProps = itemChild.props
 					contentText = contentProps.text
 					content = contentProps.children
 				end
@@ -292,6 +342,7 @@ local Accordion = React.forwardRef(function(props, ref)
 				end
 				_object[_left] = _condition
 				_object.header = header
+				_object.contentProps = contentProps or {}
 				_object.contentText = contentText
 				_object.content = content
 				table.insert(parsed, _object)

package/out/Components/Layout/Fieldset.luau

@@ -45,6 +45,45 @@ local Fieldset = React.forwardRef(function(props, ref)
 			labelActivated:Destroy()
 		end
 	end, {})
+	local containerRef = React.useRef()
+	local setContainerRef = function(instance)
+		containerRef.current = instance
+		local _ref = ref
+		if type(_ref) == "function" then
+			ref(instance)
+		else
+			local _condition = ref ~= nil
+			if _condition then
+				local _ref_1 = ref
+				_condition = type(_ref_1) == "table"
+			end
+			if _condition then
+				ref.current = instance
+			end
+		end
+	end
+	React.useEffect(function()
+		local frame = containerRef.current
+		if not frame then
+			return nil
+		end
+		-- Some renderers (e.g. the browser-based Loom scene preview) don't
+		-- back this ref with an instance that supports property-changed
+		-- signals, so guard the subscription instead of throwing and
+		-- losing breakpoint width tracking.
+		local conn
+		pcall(function()
+			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+				return setWidth(frame.AbsoluteSize.X)
+			end)
+		end)
+		return function()
+			local _result = conn
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, {})
 	local fieldsetContext = React.useMemo(function()
 		local _object = {}
 		local _left = "disabled"
@@ -68,12 +107,7 @@ local Fieldset = React.forwardRef(function(props, ref)
 	return React.createElement(FieldsetContext.Provider, {
 		value = fieldsetContext,
 	}, React.createElement(Container, {
-		ref = ref,
-		Change = {
-			AbsoluteSize = function(instance)
-				setWidth(instance.AbsoluteSize.X)
-			end,
-		},
+		ref = setContainerRef,
 	}, React.createElement(HStack, {
 		Wraps = wrap,
 		valign = "Center",

package/out/Components/Layout/Group.luau

@@ -34,9 +34,7 @@ local function GroupElement(props)
 		_result_1 = _result_1.removeElement
 	end
 	React.useEffect(_exp, { enabled, _result_1 })
-	if not enabled then
-		return props.children
-	end
+	local elementRef = React.useRef()
 	local _result_2 = props.padding
 	if _result_2 ~= nil then
 		_result_2 = _result_2.left
@@ -71,14 +69,38 @@ local function GroupElement(props)
 		_condition_4 = 0
 	end
 	local verticalPadding = _condition_3 + _condition_4
+	React.useEffect(function()
+		if not enabled then
+			return nil
+		end
+		local frame = elementRef.current
+		if not frame or not context then
+			return nil
+		end
+		-- Some renderers (e.g. the browser-based Loom scene preview) don't
+		-- back this ref with an instance that supports property-changed
+		-- signals, so guard the subscription instead of throwing and
+		-- losing size reporting.
+		local conn
+		pcall(function()
+			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+				context.reportSize(id, Vector2.new(frame.AbsoluteSize.X + horizontalPadding, frame.AbsoluteSize.Y + verticalPadding))
+			end)
+		end)
+		return function()
+			local _result_6 = conn
+			if _result_6 ~= nil then
+				_result_6:Disconnect()
+			end
+		end
+	end, { enabled, context, id, horizontalPadding, verticalPadding })
+	if not enabled then
+		return props.children
+	end
 	return React.createElement("frame", {
+		ref = elementRef,
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
-		Change = {
-			AbsoluteSize = function(instance)
-				context.reportSize(id, Vector2.new(instance.AbsoluteSize.X + horizontalPadding, instance.AbsoluteSize.Y + verticalPadding))
-			end,
-		},
 	}, props.children)
 end
 local function getMaxVector2(map)

package/out/Components/Layout/HStack.luau

@@ -11,6 +11,7 @@ local function HStack(props)
 		VerticalAlignment = props.valign,
 		Padding = props.Padding or UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2)),
 		Wraps = if props.Wraps == nil then true else props.Wraps,
+		SortOrder = Enum.SortOrder.LayoutOrder,
 		Change = props.Change,
 		Event = props.Event,
 	}), props.children)

package/out/Components/Layout/Row.luau

@@ -13,6 +13,48 @@ local Row = React.forwardRef(function(props, ref)
 	local width, setWidth = React.useState(0)
 	local breakpoints = props.breakpoints or theme.breakpoints
 	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
+	local rowRef = React.useRef()
+	local setRowRef = function(instance)
+		rowRef.current = instance
+		local _ref = ref
+		if type(_ref) == "function" then
+			ref(instance)
+		else
+			local _condition = ref ~= nil
+			if _condition then
+				local _ref_1 = ref
+				_condition = type(_ref_1) == "table"
+			end
+			if _condition then
+				ref.current = instance
+			end
+		end
+	end
+	React.useEffect(function()
+		local frame = rowRef.current
+		if not frame then
+			return nil
+		end
+		-- Some renderers (e.g. the browser-based Loom scene preview) don't
+		-- back this ref with an instance that supports property-changed
+		-- signals, so guard the subscription instead of throwing and
+		-- losing breakpoint width tracking.
+		local conn
+		pcall(function()
+			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+				local nextWidth = frame.AbsoluteSize.X
+				setWidth(function(currentWidth)
+					return if currentWidth == nextWidth then currentWidth else nextWidth
+				end)
+			end)
+		end)
+		return function()
+			local _result = conn
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, {})
 	local _exp = React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Horizontal,
 		SortOrder = Enum.SortOrder.LayoutOrder,
@@ -43,18 +85,10 @@ local Row = React.forwardRef(function(props, ref)
 	_object.breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
 	_attributes.value = _object
 	return React.createElement("frame", {
-		ref = ref,
+		ref = setRowRef,
 		Size = UDim2.fromScale(1, 1),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
-		Change = {
-			AbsoluteSize = function(instance)
-				local nextWidth = instance.AbsoluteSize.X
-				setWidth(function(currentWidth)
-					return if currentWidth == nextWidth then currentWidth else nextWidth
-				end)
-			end,
-		},
 	}, _exp, React.createElement(RowContext.Provider, _attributes, props.children))
 end)
 return {

package/out/Components/Layout/Scroller.luau

@@ -19,11 +19,26 @@ local function Scroller(props)
 			setIsScrolling(frame.AbsoluteCanvasSize.Y > frame.AbsoluteWindowSize.Y)
 		end
 		updateScrolling()
-		local canvasConn = frame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(updateScrolling)
-		local windowConn = frame:GetPropertyChangedSignal("AbsoluteWindowSize"):Connect(updateScrolling)
+		-- Some renderers (e.g. the browser-based Loom scene preview) don't back
+		-- this ref with an instance that supports property-changed signals, so
+		-- guard the subscription instead of throwing and losing overflow tracking.
+		local canvasConn
+		local windowConn
+		pcall(function()
+			canvasConn = frame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(updateScrolling)
+		end)
+		pcall(function()
+			windowConn = frame:GetPropertyChangedSignal("AbsoluteWindowSize"):Connect(updateScrolling)
+		end)
 		return function()
-			canvasConn:Disconnect()
-			windowConn:Disconnect()
+			local _result = canvasConn
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+			local _result_1 = windowConn
+			if _result_1 ~= nil then
+				_result_1:Disconnect()
+			end
 		end
 	end, {})
 	local spacing = SpacingHelper:GetPadding(theme, props.spacing)

package/out/Components/Layout/Tabs.d.ts

@@ -1,10 +1,11 @@
 import React from "@rbxts/react";
-import { ScalableElementProps } from "../../Interfaces";
+import { PaddingProps, ScalableElementProps } from "../../Interfaces";
+import { CssBackgroundImage } from "../../Theme";
 interface TabProps {
     children?: React.ReactNode;
 }
 declare function Tab(_props: TabProps): undefined;
-interface TabTitleProps {
+interface TabTitleProps extends PaddingProps {
     text: string;
 }
 declare function TabTitle(_props: TabTitleProps): undefined;
@@ -13,6 +14,7 @@ interface TabContentProps {
 }
 declare function TabContent(props: TabContentProps): undefined;
 interface TabsProps extends ScalableElementProps {
+    backgroundImage?: CssBackgroundImage;
 }
 type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<ImageLabel>> & {
     Tab: typeof Tab;

package/out/Components/Layout/Tabs.luau

@@ -46,9 +46,9 @@ local function TabButtonContent(props)
 	end
 	local intent = ColorHelper:getIntentColors(theme, "primary", _result_1, theme.components.tabs.button.intents)
 	return React.createElement(React.Fragment, nil, React.createElement(Corners, {
-		radius = theme.components.tabs.button.cornerRadius,
+		radius = theme.components.tabs.list.cornerRadius,
 	}), React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.button.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.tabs.button.spacing, theme.components.tabs.button.padding),
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
 	}), React.createElement(Text, {
@@ -117,11 +117,13 @@ local Tabs = React.forwardRef(function(props, ref)
 		radius = theme.components.tabs.list.cornerRadius,
 	})
 	local _exp_1 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
 	})
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#tabs)
 	local _callback = function(tab, index)
+		local _attributes_1 = table.clone(tab.title)
+		setmetatable(_attributes_1, nil)
 		return React.createElement(HoverButton, {
 			isSelected = selected == index,
 			default = {
@@ -166,9 +168,7 @@ local Tabs = React.forwardRef(function(props, ref)
 				SliceScale = buttonFocusBackgroundImage.SliceScale,
 				TileSize = buttonFocusBackgroundImage.TileSize,
 			},
-		}, React.createElement(TabButtonContent, {
-			text = tab.title.text,
-		}))
+		}, React.createElement(TabButtonContent, _attributes_1))
 	end
 	for _k, _v in tabs do
 		_newValue[_k] = _callback(_v, _k - 1, tabs)
@@ -181,16 +181,18 @@ local Tabs = React.forwardRef(function(props, ref)
 		Color = theme.components.tabs.borderColor,
 	})
 	local _exp_4 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
 	})
 	local _exp_5 = React.createElement(Corners, {
-		radius = theme.components.tabs.list.cornerRadius,
+		radius = theme.components.tabs.cornerRadius,
 	})
 	local _result = selectedTab
 	if _result ~= nil then
 		_result = _result.content
 	end
-	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result))
+	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, {
+		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
+	}, _exp_3, _exp_4, _exp_5, _result))
 end)
 Tabs.Title = TabTitle
 Tabs.Tab = Tab

package/out/Components/Navigation/Menu.luau

@@ -40,6 +40,7 @@ local Menu = React.forwardRef(function(props, ref)
 		valign = "Center",
 	}, React.createElement(Button, {
 		icon = "bars",
+		LayoutOrder = 1,
 		Event = {
 			Activated = function()
 				setCollapsed(not collapsed)
@@ -48,6 +49,7 @@ local Menu = React.forwardRef(function(props, ref)
 	}), not collapsed and React.createElement(Text, {
 		text = props.title,
 		variant = "heading",
+		LayoutOrder = 2,
 	}))), React.createElement(FlexItem, {
 		mode = "Fill",
 	}, React.createElement(Scroller, {