@rbxts/react-clean-ui 1.0.19 → 1.0.38

package/out/Components/Layout/Accordion.luau

@@ -0,0 +1,431 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
+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 SizeHelper = _Helpers.SizeHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
+local HoverButton = _HoverButton.HoverButton
+local HoverButtonContext = _HoverButton.HoverButtonContext
+local Icon = TS.import(script, script.Parent.Parent, "Surface", "Icon").Icon
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local Container = TS.import(script, script.Parent, "Container").Container
+local HStack = TS.import(script, script.Parent, "HStack").HStack
+local VStack = TS.import(script, script.Parent, "VStack").VStack
+local function AccordionItem(_props)
+	return nil
+end
+local function AccordionHeader(_props)
+	return nil
+end
+local function AccordionContent(_props)
+	return nil
+end
+local function AccordionHeaderVisual(props)
+	local theme = React.useContext(CleanThemeContext)
+	local hover = React.useContext(HoverButtonContext)
+	local _result
+	if props.disabled then
+		_result = "disabled"
+	else
+		local _result_1 = hover
+		if _result_1 ~= nil then
+			_result_1 = _result_1.isSelected
+		end
+		local _result_2
+		if _result_1 then
+			_result_2 = "focus"
+		else
+			local _result_3 = hover
+			if _result_3 ~= nil then
+				_result_3 = _result_3.hover
+			end
+			_result_2 = if _result_3 then "hover" else "default"
+		end
+		_result = _result_2
+	end
+	local state = _result
+	local colors = ColorHelper:getIntentColors(theme, "primary", state, theme.components.accordion.header.intents)
+	local rotation, rotationTween = useTween(if props.open then 180 else 0, {
+		duration = props.duration,
+	})
+	React.useEffect(function()
+		local goal = if props.open then 180 else 0
+		rotationTween:setGoal(goal, {
+			duration = props.duration,
+		})
+		if props.duration == 0 then
+			rotationTween:setPosition(goal)
+		end
+		rotationTween:start()
+	end, { props.duration, props.open, rotationTween })
+	local _condition = props.header.text == nil and props.header.children ~= nil
+	if _condition then
+		local _children = props.header.children
+		_condition = not (type(_children) == "string")
+	end
+	if _condition then
+		return props.header.children
+	end
+	local _exp = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.accordion.header.spacing),
+	})
+	local _exp_1 = props.header.icon ~= nil and React.createElement(Icon, {
+		icon = props.header.icon,
+		color = colors.textColor,
+	})
+	local _result_1
+	if props.header.text ~= nil then
+		_result_1 = React.createElement(Text, {
+			text = props.header.text,
+			TextColor3 = colors.textColor,
+			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
+		})
+	else
+		local _children = props.header.children
+		_result_1 = if type(_children) == "string" then React.createElement(Text, {
+			text = props.header.children,
+			TextColor3 = colors.textColor,
+			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
+		}) else props.header.children
+	end
+	return React.createElement(React.Fragment, nil, _exp, React.createElement(HStack, {
+		valign = "Center",
+		Wraps = false,
+		HorizontalFlex = Enum.UIFlexAlignment.Fill,
+	}, _exp_1, React.createElement(Container, {
+		Size = UDim2.new(1, theme.components.accordion.header.indicatorSize, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, _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)
+	local mounted, setMounted = React.useState(props.open)
+	local height, heightTween = useTween(0, {
+		duration = props.duration,
+	})
+	React.useEffect(function()
+		if props.open then
+			setMounted(true)
+		else
+			heightTween:setGoal(0, {
+				duration = props.duration,
+			})
+			if props.duration == 0 then
+				heightTween:setPosition(0)
+			end
+			heightTween:start()
+			if props.duration == 0 then
+				setMounted(false)
+			end
+		end
+	end, { props.duration, props.open, heightTween })
+	React.useEffect(function()
+		if props.duration == 0 then
+			heightTween:setPosition(heightTween:getGoal())
+		end
+	end, { props.duration, heightTween })
+	React.useEffect(function()
+		return heightTween:onComplete(function(value)
+			if value == 0 and not props.open then
+				setMounted(false)
+			end
+		end)
+	end, { heightTween, props.open })
+	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 _condition = not props.first
+	if _condition then
+		local _attributes = {
+			BackgroundColor3 = theme.components.accordion.borderColor,
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		}
+		local _exp = UDim2.fromOffset(0, theme.components.accordion.borderThickness)
+		local _arg0 = UDim2.fromScale(1, 0)
+		_attributes.Size = _exp + _arg0
+		_condition = (React.createElement("frame", _attributes))
+	end
+	local _attributes = {
+		isSelected = props.open,
+	}
+	local _object = {
+		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"
+	local _condition_1 = defaultColors.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	_object[_left] = _condition_1
+	_object.BorderSizePixel = 0
+	_object.Event = {
+		Activated = props.onActivate,
+	}
+	_attributes.default = _object
+	local _object_1 = {
+		BackgroundColor3 = hoverColors.backgroundColor,
+	}
+	local _left_1 = "BackgroundTransparency"
+	local _condition_2 = hoverColors.backgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	_object_1[_left_1] = _condition_2
+	_attributes.hover = _object_1
+	local _object_2 = {
+		BackgroundColor3 = focusColors.backgroundColor,
+	}
+	local _left_2 = "BackgroundTransparency"
+	local _condition_3 = focusColors.backgroundTransparency
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	_object_2[_left_2] = _condition_3
+	_attributes.focus = _object_2
+	return React.createElement(Container, {
+		width = "100%",
+	}, React.createElement(VStack, {
+		spacing = "None",
+	}, _condition, React.createElement(HoverButton, _attributes, props.first and (React.createElement("uicorner", {
+		TopLeftRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
+		TopRightRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
+		BottomLeftRadius = UDim.new(0, 0),
+		BottomRightRadius = UDim.new(0, 0),
+	})), React.createElement(AccordionHeaderVisual, {
+		header = props.header,
+		disabled = props.disabled,
+		duration = props.duration,
+		open = props.open,
+	})), mounted and (React.createElement("frame", {
+		BackgroundTransparency = 1,
+		ClipsDescendants = true,
+		Size = height:map(function(value)
+			local _exp = UDim2.fromScale(1, 0)
+			local _arg0 = UDim2.fromOffset(0, value)
+			return _exp + _arg0
+		end),
+	}, React.createElement("frame", {
+		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),
+	}), if props.contentText ~= nil then React.createElement(Text, {
+		text = props.contentText,
+	}) else props.content)))))
+end
+local Accordion = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local items = React.useMemo(function()
+		local parsed = {}
+		local seen = {}
+		React.Children.forEach(props.children, function(child)
+			if not React.isValidElement(child) or child.type ~= AccordionItem then
+				return nil
+			end
+			local item = child
+			local _value = item.props.value
+			if seen[_value] ~= nil then
+				return nil
+			end
+			local header
+			local contentText
+			local content
+			React.Children.forEach(item.props.children, function(itemChild)
+				if not React.isValidElement(itemChild) then
+					return nil
+				end
+				if itemChild.type == AccordionHeader and header == nil then
+					header = itemChild.props
+				end
+				if itemChild.type == AccordionContent and content == nil then
+					local contentProps = itemChild.props
+					contentText = contentProps.text
+					content = contentProps.children
+				end
+			end)
+			if header ~= nil then
+				local _value_1 = item.props.value
+				seen[_value_1] = true
+				local _object = {
+					value = item.props.value,
+				}
+				local _left = "disabled"
+				local _condition = item.props.disabled
+				if _condition == nil then
+					_condition = false
+				end
+				_object[_left] = _condition
+				_object.header = header
+				_object.contentText = contentText
+				_object.content = content
+				table.insert(parsed, _object)
+			end
+		end)
+		return parsed
+	end, { props.children })
+	local initial = if props.defaultValue ~= nil then { props.defaultValue } else {}
+	local uncontrolled, setUncontrolled = React.useState(initial)
+	local supplied = if props.value ~= nil then { props.value } else uncontrolled
+	local _set = {}
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return item.value
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	for _, _v in _newValue do
+		_set[_v] = true
+	end
+	local available = _set
+	-- ▼ ReadonlyArray.filter ▼
+	local _newValue_1 = {}
+	local _callback_1 = function(value)
+		local _value = value
+		return available[_value] ~= nil
+	end
+	local _length = 0
+	for _k, _v in supplied do
+		if _callback_1(_v, _k - 1, supplied) == true then
+			_length += 1
+			_newValue_1[_length] = _v
+		end
+	end
+	-- ▲ ReadonlyArray.filter ▲
+	local openValues = _newValue_1
+	React.useEffect(function()
+		local _condition = props.value == nil
+		if _condition then
+			local _condition_1 = #uncontrolled ~= #openValues
+			if not _condition_1 then
+				-- ▼ ReadonlyArray.some ▼
+				local _result = false
+				local _callback_2 = function(value)
+					local _value = value
+					return not (available[_value] ~= nil)
+				end
+				for _k, _v in uncontrolled do
+					if _callback_2(_v, _k - 1, uncontrolled) then
+						_result = true
+						break
+					end
+				end
+				-- ▲ ReadonlyArray.some ▲
+				_condition_1 = _result
+			end
+			_condition = _condition_1
+		end
+		if _condition then
+			setUncontrolled(openValues)
+		end
+	end, { items, props.value })
+	local activate = function(item)
+		if item.disabled or (item.content == nil and item.contentText == nil) then
+			return nil
+		end
+		local _value = item.value
+		local isOpen = table.find(openValues, _value) ~= nil
+		local nextValues
+		if isOpen then
+			if not props.collapsible then
+				return nil
+			end
+			nextValues = {}
+		else
+			nextValues = { item.value }
+		end
+		if props.value == nil then
+			setUncontrolled(nextValues)
+		end
+		local _result = props.onValueChange
+		if _result ~= nil then
+			_result(nextValues[1])
+		end
+	end
+	local _exp = React.createElement(Corners, {
+		radius = theme.components.accordion.cornerRadius,
+	})
+	local _exp_1 = React.createElement("uistroke", {
+		Color = theme.components.accordion.borderColor,
+		Thickness = theme.components.accordion.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Outer,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue_2 = table.create(#items)
+	local _callback_2 = function(item, index)
+		local _attributes = {
+			key = item.value,
+		}
+		for _k, _v in item do
+			_attributes[_k] = _v
+		end
+		_attributes.first = index == 0
+		local _value = item.value
+		_attributes.open = table.find(openValues, _value) ~= nil
+		local _condition = props.animationDuration
+		if _condition == nil then
+			_condition = theme.components.accordion.animation.duration
+		end
+		_attributes.duration = _condition
+		_attributes.onActivate = function()
+			return activate(item)
+		end
+		return React.createElement(RenderedAccordionItem, _attributes)
+	end
+	for _k, _v in items do
+		_newValue_2[_k] = _callback_2(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(Container, {
+		ref = ref,
+		width = "100%",
+		height = "100%",
+		ClipsDescendants = true,
+	}, _exp, _exp_1, React.createElement(VStack, {
+		Padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.scale, theme.components.accordion.spacing)),
+	}, _newValue_2))
+end)
+Accordion.Item = AccordionItem
+Accordion.Header = AccordionHeader
+Accordion.Content = AccordionContent
+return {
+	Accordion = Accordion,
+}

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,19 +1,25 @@
 -- 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
 local Container = React.forwardRef(function(props, ref)
 	local group = React.useContext(GroupContext)
+	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,
 		Tag = props.Tag,
 		Active = props.Active,
-		AnchorPoint = SizeHelper:GetAnchor(props),
-		AutomaticSize = SizeHelper:GetAutoSize(props),
+		AnchorPoint = if centerViaLayout then Vector2.zero else SizeHelper:GetAnchor(props),
+		AutomaticSize = autoSize,
 		BackgroundColor3 = props.BackgroundColor3,
 	}
 	local _condition = props.BackgroundTransparency
@@ -31,7 +37,7 @@ local Container = React.forwardRef(function(props, ref)
 	_attributes.NextSelectionLeft = props.NextSelectionLeft
 	_attributes.NextSelectionRight = props.NextSelectionRight
 	_attributes.NextSelectionUp = props.NextSelectionUp
-	_attributes.Position = SizeHelper:GetPosition(props)
+	_attributes.Position = if centerViaLayout then UDim2.fromOffset(0, 0) else SizeHelper:GetPosition(props)
 	_attributes.Rotation = props.Rotation
 	_attributes.Selectable = props.Selectable
 	_attributes.SelectionGroup = props.SelectionGroup
@@ -61,12 +67,31 @@ 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
-	return React.createElement("frame", _attributes, React.createElement(Group.Element, {
+	local content = (React.createElement("imagelabel", _attributes, React.createElement(Group.Element, {
 		enabled = props.group,
-	}, props.children))
+	}, props.children)))
+	if not centerViaLayout then
+		return content
+	end
+	return React.createElement("frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+		ZIndex = props.ZIndex,
+		LayoutOrder = props.LayoutOrder,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+	}), content)
 end)
 return {
 	Container = Container,

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

@@ -1,4 +1,4 @@
-import React from "@rbxts/react";
+import React, { Binding } from "@rbxts/react";
 import { SpacedElementProps } from "../../Interfaces";
 interface HStackProps extends SpacedElementProps {
     children?: React.ReactNode;
@@ -7,6 +7,7 @@ interface HStackProps extends SpacedElementProps {
     HorizontalFlex?: Enum.UIFlexAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
+    Padding?: UDim | Binding<UDim>;
 }
 export declare function HStack(props: HStackProps): React.JSX.Element;
 export {};

package/out/Components/Layout/HStack.luau

@@ -5,12 +5,11 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function HStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2))
 	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalFlex = props.HorizontalFlex,
 		VerticalAlignment = props.valign,
-		Padding = padding,
+		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,
 		Change = props.Change,
 		Event = props.Event,

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

@@ -41,7 +41,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

@@ -14,7 +14,7 @@ interface TabContentProps {
 declare function TabContent(props: TabContentProps): undefined;
 interface TabsProps extends ScalableElementProps {
 }
-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;