@rbxts/react-clean-ui 1.0.36 → 1.1.0

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
@@ -53,11 +54,11 @@ local function AccordionHeaderVisual(props)
 	end
 	local state = _result
 	local colors = ColorHelper:getIntentColors(theme, "primary", state, theme.components.accordion.header.intents)
-	local rotation, rotationTween = useTween(if props.open then 0 else -90, {
+	local rotation, rotationTween = useTween(if props.open then 180 else 0, {
 		duration = props.duration,
 	})
 	React.useEffect(function()
-		local goal = if props.open then 0 else -90
+		local goal = if props.open then 180 else 0
 		rotationTween:setGoal(goal, {
 			duration = props.duration,
 		})
@@ -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,
@@ -103,12 +104,13 @@ local function AccordionHeaderVisual(props)
 	}, _exp_1, React.createElement(Container, {
 		Size = UDim2.new(1, theme.components.accordion.header.indicatorSize, 0, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
-	}, _result_1), React.createElement(Icon, {
+	}, _result_1), React.createElement(Container, nil, React.createElement(Icon, {
 		icon = "chevron-down",
 		color = if props.disabled then colors.textColor else theme.components.accordion.header.indicatorColor,
 		Size = UDim2.fromOffset(theme.components.accordion.header.indicatorSize, theme.components.accordion.header.indicatorSize),
+		AnchorPoint = Vector2.new(0.5, 0.5),
 		Rotation = rotation,
-	})))
+	}))))
 end
 local function RenderedAccordionItem(props)
 	local theme = React.useContext(CleanThemeContext)
@@ -116,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)
@@ -147,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 = {
@@ -163,12 +205,11 @@ local function RenderedAccordionItem(props)
 		isSelected = props.open,
 	}
 	local _object = {
-		Active = not props.disabled and props.content ~= nil,
-		Selectable = not props.disabled and props.content ~= nil,
+		Active = not props.disabled and (props.content ~= nil or props.contentText ~= nil),
+		Selectable = not props.disabled and (props.content ~= nil or props.contentText ~= nil),
 		AutoButtonColor = false,
 		AutomaticSize = Enum.AutomaticSize.Y,
 		Size = UDim2.fromScale(1, 0),
-		ImageTransparency = 1,
 		BackgroundColor3 = defaultColors.backgroundColor,
 	}
 	local _left = "BackgroundTransparency"
@@ -178,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,
 	}
@@ -191,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,
@@ -201,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%",
@@ -225,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)))))
@@ -263,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)
@@ -273,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
@@ -291,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/Container.d.ts

@@ -1,6 +1,8 @@
 import React from "@rbxts/react";
 import { PositionElementProps, SizeElementProps, ZIndexElementProps } from "../../Interfaces/";
-export interface ContainerProps extends SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<Frame> {
+import { CssBackgroundImage } from "../../Theme";
+export interface ContainerProps extends SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<ImageLabel> {
     group?: boolean;
+    backgroundImage?: Partial<CssBackgroundImage>;
 }
-export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<Frame>>;
+export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Layout/Container.luau

@@ -1,7 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
+local _ = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local SizeHelper = _.SizeHelper
+local CssHelper = _.CssHelper
 local _Group = TS.import(script, script.Parent, "Group")
 local Group = _Group.Group
 local GroupContext = _Group.GroupContext
@@ -10,6 +12,7 @@ local Container = React.forwardRef(function(props, ref)
 	local autoSize = SizeHelper:GetAutoSize(props)
 	local isAutoSizeActive = autoSize ~= Enum.AutomaticSize.None and autoSize ~= "None"
 	local centerViaLayout = props.center == true and props.Position == nil and props.AnchorPoint == nil and isAutoSizeActive
+	local backgroundImage = CssHelper:resolveBackgroundImage(props.backgroundImage)
 	local _attributes = {
 		ref = ref,
 		Archivable = props.Archivable,
@@ -64,10 +67,16 @@ local Container = React.forwardRef(function(props, ref)
 	_attributes.ZIndex = props.ZIndex
 	_attributes.AutoLocalize = props.AutoLocalize
 	_attributes.RootLocalizationTable = props.RootLocalizationTable
-	_attributes.Style = props.Style
+	_attributes.Image = backgroundImage.Image
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
 	_attributes.Change = props.Change
 	_attributes.Event = props.Event
-	local content = (React.createElement("frame", _attributes, React.createElement(Group.Element, {
+	local content = (React.createElement("imagelabel", _attributes, React.createElement(Group.Element, {
 		enabled = props.group,
 	}, props.children)))
 	if not centerViaLayout then

package/out/Components/Layout/Draggable.luau

@@ -12,7 +12,7 @@ local DraggableContext = _Contexts.DraggableContext
 local OverlayConsumer = _Contexts.OverlayConsumer
 local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
 local Corners = TS.import(script, script.Parent.Parent, "Decorator").Corners
-local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Interfaces").CustomInputService
+local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Helpers").CustomInputService
 local function DragHandle(_param)
 	local children = _param.children
 	local draggable = React.useContext(DraggableContext)

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

@@ -16,7 +16,7 @@ interface FieldsetSlotProps {
 }
 declare function FieldsetLabel(props: FieldsetSlotProps): React.JSX.Element;
 declare function FieldsetControl(props: FieldsetSlotProps): React.JSX.Element;
-type FieldsetComponent = React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<Frame>> & {
+type FieldsetComponent = React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<ImageLabel>> & {
     Label: typeof FieldsetLabel;
     Control: typeof FieldsetControl;
 };

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/FlexItem.d.ts

@@ -6,6 +6,7 @@ interface FlexItemProps extends ContainerProps {
     mode?: Enum.UIFlexMode | "Grow" | "None" | "Shrink" | "Fill" | "Custom" | Binding<Enum.UIFlexMode>;
     GrowRatio?: number;
     ShrinkRatio?: number;
+    HorizontalFlex?: Enum.UIFlexAlignment | "None" | "SpaceAround" | "Fill" | Binding<Enum.UIFlexAlignment>;
 }
-export declare const FlexItem: React.ForwardRefExoticComponent<Omit<FlexItemProps, "ref"> & React.RefAttributes<Frame>>;
+export declare const FlexItem: React.ForwardRefExoticComponent<Omit<FlexItemProps, "ref"> & React.RefAttributes<ImageLabel>>;
 export {};

package/out/Components/Layout/FlexItem.luau

@@ -11,6 +11,7 @@ local FlexItem = React.forwardRef(function(props, ref)
 		GrowRatio = props.GrowRatio,
 		ShrinkRatio = props.ShrinkRatio,
 	}), React.createElement("uilistlayout", {
+		HorizontalFlex = props.HorizontalFlex,
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = props.align,
 	}), props.children)

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.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { PositionElementProps, SizeElementProps, SpacedElementProps } from "../../Interfaces";
 interface ScrollerProps extends SizeElementProps, SpacedElementProps, PositionElementProps {
     children?: React.ReactNode;
+    AutomaticSizeParent?: boolean;
 }
 export declare function Scroller(props: ScrollerProps): React.JSX.Element;
 export {};

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)
@@ -41,7 +56,7 @@ local function Scroller(props)
 		ScrollBarThickness = thickness,
 		VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
 		AutomaticCanvasSize = Enum.AutomaticSize.Y,
-	}, React.createElement("uilistlayout", {
+	}, props.AutomaticSizeParent and React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Horizontal,
 	}), React.createElement("frame", {
 		Size = UDim2.new(1, if isScrolling then -thickness - spacing else 0, 0, 0),

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,8 +14,9 @@ interface TabContentProps {
 }
 declare function TabContent(props: TabContentProps): undefined;
 interface TabsProps extends ScalableElementProps {
+    backgroundImage?: CssBackgroundImage;
 }
-type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<Frame>> & {
+type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<ImageLabel>> & {
     Tab: typeof Tab;
     Title: typeof TabTitle;
     Content: typeof TabContent;