@rbxts/react-clean-ui 1.0.14 → 1.0.36

package/out/Components/Interaction/Toast.d.ts

@@ -1,6 +1,6 @@
 import React from "@rbxts/react";
 import { SizeElementProps } from "../../Interfaces";
-import { ToastOptions } from "../../Contexts/";
+import { ToastOptions } from "../../Contexts";
 interface ToastProps extends ToastOptions {
     onDismiss: () => void;
 }

package/out/Components/Interaction/Toast.luau

@@ -10,11 +10,11 @@ local Container = _Layout.Container
 local FlexItem = _Layout.FlexItem
 local HStack = _Layout.HStack
 local VStack = _Layout.VStack
-local Button = TS.import(script, script.Parent.Parent, "Input").Button
+local Button = TS.import(script, script.Parent.Parent, "Input", "Button").Button
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
-local _ = TS.import(script, script.Parent.Parent.Parent, "Contexts")
-local CleanThemeContext = _.CleanThemeContext
-local useToast = _.useToast
+local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local CleanThemeContext = _Contexts.CleanThemeContext
+local useToast = _Contexts.useToast
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local SizeHelper = _Helpers.SizeHelper

package/out/Components/Interaction/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import React from "@rbxts/react";
 import { IntentElementProps } from "../../Interfaces";
 import { BoxProps } from "../Surface";
-type TooltipPlacement = "Top" | "Bottom" | "Left" | "Right";
+type TooltipPlacement = "Top" | "Bottom" | "Left" | "Right" | "Center";
 interface TooltipProps extends BoxProps, IntentElementProps {
     content: React.ReactNode | string;
     children: React.ReactElement<React.InstanceProps<GuiObject>>;

package/out/Components/Interaction/Tooltip.luau

@@ -38,7 +38,7 @@ local function TooltipPopup(props)
 		resolvedPadding.left += shadow.blurRadius.Offset + shadow.spread.X.Offset - shadow.offset.X.Offset
 		resolvedPadding.right += shadow.blurRadius.Offset + shadow.spread.X.Offset + shadow.offset.X.Offset
 	end
-	local pointerSize = theme.components.tooltip.pointerSize
+	local pointerSize = if props.placement == "Center" then 0 else theme.components.tooltip.pointerSize
 	local anchor = Vector2.zero
 	local _position = props.target.position
 	local _absolutePosition = props.overlay.AbsolutePosition
@@ -93,6 +93,13 @@ local function TooltipPopup(props)
 			resolvedPadding.left = math.max(math.floor(pointerHeight), resolvedPadding.left)
 			break
 		end
+		if _exp == "Center" then
+			anchor = Vector2.new(0.5, 0.5)
+			local _position_1 = position
+			local _vector2 = Vector2.new(props.target.size.X / 2, props.target.size.Y / 2)
+			position = _position_1 + _vector2
+			break
+		end
 	until true
 	local intent = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.tooltip.intents)
 	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, props.spacing, theme.components.tooltip.spacing))

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

@@ -0,0 +1,34 @@
+import React from "@rbxts/react";
+import { IconName, ScalableElementProps } from "../../Interfaces";
+interface AccordionItemProps {
+    children?: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+declare function AccordionItem(_props: AccordionItemProps): undefined;
+interface AccordionHeaderProps {
+    children?: React.ReactNode | string;
+    icon?: IconName;
+    text?: string;
+}
+declare function AccordionHeader(_props: AccordionHeaderProps): undefined;
+interface AccordionContentProps {
+    children?: React.ReactNode;
+    text?: string;
+}
+declare function AccordionContent(_props: AccordionContentProps): undefined;
+export interface AccordionProps extends ScalableElementProps {
+    children?: React.ReactNode;
+    collapsible?: boolean;
+    animationDuration?: number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string | undefined) => void;
+}
+type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<Frame>> & {
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Content: typeof AccordionContent;
+};
+declare const Accordion: AccordionComponent;
+export { Accordion };

package/out/Components/Layout/Accordion.luau

@@ -0,0 +1,430 @@
+-- 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 0 else -90, {
+		duration = props.duration,
+	})
+	React.useEffect(function()
+		local goal = if props.open then 0 else -90
+		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(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),
+		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,
+		Selectable = not props.disabled and props.content ~= 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/Column.d.ts

@@ -1,13 +1,7 @@
-import React, { Component } from "@rbxts/react";
-import { RowContext } from "../../Contexts/";
+import React from "@rbxts/react";
 import { ResponsiveGridSpan } from "../../Interfaces/";
 interface ColumnProps {
     span?: ResponsiveGridSpan | number | `${number}`;
 }
-export declare class Column extends Component<ColumnProps> {
-    static contextType: React.Context<import("../../Contexts/row.context").RowContextValue>;
-    context: React.ContextType<typeof RowContext>;
-    private getSpan;
-    render(): React.JSX.Element;
-}
+export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Column.luau

@@ -1,60 +1,40 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local RowContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").RowContext
 local BreakpointHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").BreakpointHelper
-local Column
-do
-	local super = Component
-	Column = setmetatable({}, {
-		__tostring = function()
-			return "Column"
-		end,
-		__index = super,
-	})
-	Column.__index = Column
-	function Column.new(...)
-		local self = setmetatable({}, Column)
-		return self:constructor(...) or self
+local function resolveSpan(span, children, breakpoint)
+	if span == nil then
+		return math.floor(12 / math.max(children, 1))
 	end
-	function Column:constructor(...)
-		super.constructor(self, ...)
+	local _span = span
+	if type(_span) == "number" then
+		return span
 	end
-	function Column:getSpan()
-		local span = self.props.span
-		if span == nil then
-			return math.floor(12 / math.max(self.context.children, 1))
+	local _span_1 = span
+	if type(_span_1) == "string" then
+		local _condition = tonumber(span)
+		if _condition == nil then
+			_condition = 12
 		end
-		if type(span) == "number" then
-			return span
-		end
-		if type(span) == "string" then
-			local _condition = tonumber(span)
-			if _condition == nil then
-				_condition = 12
-			end
-			return _condition
-		end
-		return BreakpointHelper:getValue(self.context.breakpoint, span) or 12
-	end
-	function Column:render()
-		local span = self:getSpan()
-		local fraction = math.floor((span / 12) * 1000) / 1000
-		local padding = self.context.padding
-		local widthScale = fraction + ((fraction - 1) * padding.Scale)
-		local widthOffset = (fraction - 1) * padding.Offset
-		return React.createElement("frame", {
-			Size = UDim2.new(widthScale, widthOffset, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		}, self.props.children)
+		return _condition
 	end
-	Column.contextType = RowContext
-	Column = ReactComponent(Column) or Column
+	return BreakpointHelper:getValue(breakpoint, span) or 12
 end
+local Column = React.forwardRef(function(props, ref)
+	local context = React.useContext(RowContext)
+	local span = resolveSpan(props.span, context.children, context.breakpoint)
+	local fraction = math.floor((span / 12) * 1000) / 1000
+	local padding = context.padding
+	local widthScale = fraction + ((fraction - 1) * padding.Scale)
+	local widthOffset = (fraction - 1) * padding.Offset
+	return React.createElement("frame", {
+		ref = ref,
+		Size = UDim2.new(widthScale, widthOffset, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}, props.children)
+end)
 return {
 	Column = Column,
 }

package/out/Components/Layout/Container.luau

@@ -7,13 +7,16 @@ 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 _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 +34,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
@@ -64,9 +67,22 @@ local Container = React.forwardRef(function(props, ref)
 	_attributes.Style = props.Style
 	_attributes.Change = props.Change
 	_attributes.Event = props.Event
-	return React.createElement("frame", _attributes, React.createElement(Group.Element, {
+	local content = (React.createElement("frame", _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,