@rbxts/react-clean-ui 1.0.36 → 1.0.38

package/out/Components/Input/Input.luau

@@ -5,11 +5,14 @@ local React = _react
 local useRef = _react.useRef
 local useState = _react.useState
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
-local TypographyHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").TypographyHelper
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local CssHelper = _Helpers.CssHelper
+local TypographyHelper = _Helpers.TypographyHelper
 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 function Input(props)
 	local theme = React.useContext(CleanThemeContext)
 	local fieldset = React.useContext(FieldsetContext)
@@ -20,7 +23,12 @@ local function Input(props)
 	local labelActivated = _labelActivated
 	local ref = useRef()
 	local value, setValue = useState(props.value)
+	local lastValidText = useRef(props.value)
 	local typography = TypographyHelper:getTypography(theme, props.scale, theme.components.input.typography)
+	-- Roblox's TextBox has no PlaceholderTransparency and shares font/size/weight/lineHeight
+	-- between Text and PlaceholderText, so only `.color` from this resolution is actually used below.
+	local placeholderTypography = TypographyHelper:getTypography(theme, props.scale, theme.components.input.placeholder)
+	local backgroundImage = CssHelper:resolveBackgroundImage(theme.components.input.backgroundImage)
 	React.useEffect(function()
 		if not labelActivated then
 			return nil
@@ -60,31 +68,130 @@ local function Input(props)
 		_condition = props.placeholder
 	end
 	_attributes_1.PlaceholderText = _condition
-	_attributes_1.PlaceholderColor3 = props.PlaceholderColor3
+	_attributes_1.PlaceholderColor3 = props.PlaceholderColor3 or placeholderTypography.color
 	_attributes_1.TextScaled = props.TextScaled
 	_attributes_1.LineHeight = typography.lineHeight
 	_attributes_1.Text = if props.controlled then props.value else value
-	_attributes_1.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
-	_attributes_1.ClearTextOnFocus = false
-	_attributes_1.Event = props.Event
-	_attributes_1.Change = {
-		Text = function(rbx)
+	_attributes_1.TextColor3 = props.TextColor3 or typography.color or theme.colors.intents.primary.default.textColor
+	local _condition_1 = props.TextTransparency
+	if _condition_1 == nil then
+		_condition_1 = typography.transparency
+	end
+	_attributes_1.TextTransparency = _condition_1
+	_attributes_1.Active = props.Active
+	_attributes_1.Archivable = props.Archivable
+	_attributes_1.BorderColor3 = props.BorderColor3
+	_attributes_1.BorderMode = props.BorderMode
+	_attributes_1.BorderSizePixel = props.BorderSizePixel
+	_attributes_1.ClipsDescendants = props.ClipsDescendants
+	_attributes_1.Rotation = props.Rotation
+	_attributes_1.Selectable = props.Selectable
+	_attributes_1.SelectionImageObject = props.SelectionImageObject
+	_attributes_1.SizeConstraint = props.SizeConstraint
+	_attributes_1.Tag = props.Tag
+	_attributes_1.AutoLocalize = props.AutoLocalize
+	_attributes_1.RootLocalizationTable = props.RootLocalizationTable
+	_attributes_1.NextSelectionDown = props.NextSelectionDown
+	_attributes_1.NextSelectionLeft = props.NextSelectionLeft
+	_attributes_1.NextSelectionRight = props.NextSelectionRight
+	_attributes_1.NextSelectionUp = props.NextSelectionUp
+	_attributes_1.SelectionGroup = props.SelectionGroup
+	_attributes_1.SelectionOrder = props.SelectionOrder
+	local _condition_2 = props.ClearTextOnFocus
+	if _condition_2 == nil then
+		_condition_2 = false
+	end
+	_attributes_1.ClearTextOnFocus = _condition_2
+	_attributes_1.CursorPosition = props.CursorPosition
+	_attributes_1.MultiLine = props.MultiLine
+	_attributes_1.SelectionStart = props.SelectionStart
+	_attributes_1.ShowNativeInput = props.ShowNativeInput
+	_attributes_1.TextEditable = props.TextEditable
+	_attributes_1.TextTruncate = props.TextTruncate
+	_attributes_1.RichText = props.RichText
+	local _object = {}
+	local _spread = props.Event
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	_object.FocusLost = function(rbx, enterPressed, inputThatCausedFocusLoss)
+		if props.validation == "Number" or props.validation == "Int" then
 			local number = tonumber(rbx.Text)
-			if (props.validation == "Number" or props.validation == "Int") and number == nil and rbx.Text ~= "" and rbx.Text ~= "-" then
-				ref.current.Text = props.value
-				return nil
+			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
 			end
-			setValue(rbx.Text)
-			local _result = props.onChange
+		end
+		local _result = props.Event
+		if _result ~= nil then
+			_result = _result.FocusLost
 			if _result ~= nil then
-				_result(rbx.Text)
+				_result(rbx, enterPressed, inputThatCausedFocusLoss)
 			end
-		end,
-	}
-	return React.createElement("frame", {
-		Size = UDim2.fromScale(1, 0),
+		end
+	end
+	_attributes_1.Event = _object
+	local _object_1 = {}
+	local _spread_1 = props.Change
+	if _spread_1 then
+		for _k, _v in _spread_1 do
+			_object_1[_k] = _v
+		end
+	end
+	_object_1.Text = function(rbx)
+		local resolved = resolveValidatedText(props.validation, rbx.Text, lastValidText.current)
+		if resolved ~= rbx.Text then
+			ref.current.Text = resolved
+			return nil
+		end
+		lastValidText.current = rbx.Text
+		setValue(rbx.Text)
+		local _result = props.onChange
+		if _result ~= nil then
+			_result(rbx.Text)
+		end
+		local _result_1 = props.Change
+		if _result_1 ~= nil then
+			_result_1 = _result_1.Text
+			if _result_1 ~= nil then
+				_result_1(rbx)
+			end
+		end
+	end
+	_attributes_1.Change = _object_1
+	return React.createElement("imagelabel", {
+		Size = props.Size or UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
+		AnchorPoint = props.AnchorPoint,
+		Position = props.Position,
+		LayoutOrder = props.LayoutOrder,
+		Visible = props.Visible,
+		ZIndex = props.ZIndex,
+		Image = backgroundImage.Image,
+		ImageColor3 = backgroundImage.ImageColor3,
+		ImageTransparency = backgroundImage.ImageTransparency,
+		ScaleType = backgroundImage.ScaleType,
+		SliceCenter = backgroundImage.SliceCenter,
+		SliceScale = backgroundImage.SliceScale,
+		TileSize = backgroundImage.TileSize,
 	}, _exp, _exp_1, _exp_2, React.createElement("textbox", _attributes_1))
 end
 return {

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

@@ -0,0 +1,3 @@
+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;

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

@@ -0,0 +1,21 @@
+-- Compiled with roblox-ts v3.0.0
+local CHARACTER_ALLOW_LIST_PATTERNS = {
+	Telephone = "^[%d%+%-%s%(%)]*$",
+	Alphanumeric = "^[%w]*$",
+	Email = "^[%w@%._%-+]*$",
+}
+local function resolveValidatedText(validation, candidateText, lastValidText)
+	local number = tonumber(candidateText)
+	if (validation == "Number" or validation == "Int") and number == nil and candidateText ~= "" and candidateText ~= "-" then
+		return lastValidText
+	end
+	local allowedPattern = CHARACTER_ALLOW_LIST_PATTERNS[validation or "None"]
+	if allowedPattern ~= nil and (string.match(candidateText, allowedPattern)) == nil then
+		return lastValidText
+	end
+	return candidateText
+end
+return {
+	resolveValidatedText = resolveValidatedText,
+	CHARACTER_ALLOW_LIST_PATTERNS = CHARACTER_ALLOW_LIST_PATTERNS,
+}

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

@@ -1,10 +1,11 @@
 import React from "@rbxts/react";
 import { CssSize, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
-interface SelectProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
+import { CssBackgroundImage } from "../../Theme";
+export interface SelectProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<ImageLabel> {
     selected?: number;
     'max-height'?: CssSize;
+    backgroundImage?: CssBackgroundImage;
     onChange?: (selected: number, value?: string) => void;
-    Event?: React.InstanceEvent<TextBox>;
 }
 interface SelectOptionProps {
     text?: string;
@@ -15,7 +16,7 @@ interface SelectOptionProps {
     BackgroundColor3?: Color3;
 }
 declare function SelectOption(props: SelectOptionProps): React.JSX.Element;
-type SelectComponent = React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<Frame>> & {
+type SelectComponent = React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<ImageLabel>> & {
     Option: typeof SelectOption;
 };
 declare const Select: SelectComponent;

package/out/Components/Input/Select.luau

@@ -161,6 +161,15 @@ local Select = React.forwardRef(function(props, ref)
 	if open and overlay.overlay == nil then
 		warn("You have used a Select component without using the Overlay Provider")
 	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.backgroundImage = props.backgroundImage or theme.components.select.backgroundImage
 	local _exp_1 = React.createElement("uistroke", {
 		Thickness = theme.components.select.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
@@ -169,10 +178,10 @@ local Select = React.forwardRef(function(props, ref)
 	local _exp_2 = React.createElement(Corners, {
 		radius = theme.components.select.cornerRadius,
 	})
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
-	local _exp_3 = React.createElement(Padding, _attributes)
-	local _attributes_1 = {}
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	local _exp_3 = React.createElement(Padding, _attributes_1)
+	local _attributes_2 = {}
 	local _result_1 = selectedOption
 	if _result_1 ~= nil then
 		_result_1 = _result_1.props.text
@@ -181,25 +190,25 @@ local Select = React.forwardRef(function(props, ref)
 	if _condition_1 == nil then
 		_condition_1 = "No Options"
 	end
-	_attributes_1.text = _condition_1
-	_attributes_1.typography = typography
-	local _exp_4 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_1)), React.createElement(Icon, {
+	_attributes_2.text = _condition_1
+	_attributes_2.typography = typography
+	local _exp_4 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_2)), React.createElement(Icon, {
 		icon = "caret-down",
 		color = theme.colors.intents.primary.default.textColor,
 	}))
 	local _condition_2 = open and overlay.overlay ~= nil
 	if _condition_2 then
-		local _attributes_2 = {
+		local _attributes_3 = {
 			BackgroundTransparency = 0,
 			BackgroundColor3 = theme.components.select.dropDownBackgroundColor,
 			AnchorPoint = Vector2.zero,
 		}
 		local _uDim2 = UDim2.new(0, 0, 0, dropdownSize.Y.Offset)
-		_attributes_2.Position = dropdownPosition + _uDim2
-		_attributes_2.Size = UDim2.fromOffset(dropdownSize.X.Offset, 0)
-		_attributes_2.AutomaticSize = Enum.AutomaticSize.Y
-		_attributes_2.ClipsDescendants = true
-		_condition_2 = ReactRoblox.createPortal(React.createElement("frame", _attributes_2, React.createElement("uistroke", {
+		_attributes_3.Position = dropdownPosition + _uDim2
+		_attributes_3.Size = UDim2.fromOffset(dropdownSize.X.Offset, 0)
+		_attributes_3.AutomaticSize = Enum.AutomaticSize.Y
+		_attributes_3.ClipsDescendants = true
+		_condition_2 = ReactRoblox.createPortal(React.createElement("frame", _attributes_3, React.createElement("uistroke", {
 			Thickness = theme.components.select.borderThickness,
 			BorderStrokePosition = Enum.BorderStrokePosition.Outer,
 			Color = theme.components.select.borderColor,
@@ -226,11 +235,7 @@ local Select = React.forwardRef(function(props, ref)
 			})
 		end)))), overlay.overlay)
 	end
-	return React.createElement(Container, {
-		ref = ref,
-		Size = UDim2.fromScale(1, 0),
-		AutomaticSize = Enum.AutomaticSize.Y,
-	}, React.createElement(SelectContext.Provider, {
+	return React.createElement(Container, _attributes, React.createElement(SelectContext.Provider, {
 		value = context,
 	}, React.createElement("imagebutton", {
 		ref = buttonRef,

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

@@ -2,7 +2,7 @@ import React from "@rbxts/react";
 import { ContainerProps } from "../Layout";
 type SliderValue = number | Vector2;
 type HighlightOption = "start" | "end" | "middle";
-export interface SliderProps extends ContainerProps {
+export interface SliderProps extends Omit<ContainerProps, keyof React.InstanceProps<ImageLabel>>, React.InstanceProps<Frame> {
     "max-value": number;
     "min-value"?: number;
     value?: SliderValue;

package/out/Components/Input/Slider.luau

@@ -1,7 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Interfaces").CustomInputService
+local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Helpers").CustomInputService
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
 local BoxShadow = TS.import(script, script.Parent.Parent, "Decorator").BoxShadow
@@ -248,6 +248,44 @@ local Slider = React.forwardRef(function(props, ref)
 		}
 		table.insert(handles, _arg0)
 	end
+	local _attributes = {
+		ref = ref,
+		Archivable = props.Archivable,
+		Tag = props.Tag,
+		Active = props.Active,
+		AnchorPoint = SizeHelper:GetAnchor(props),
+		BackgroundColor3 = props.BackgroundColor3,
+	}
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BorderColor3 = props.BorderColor3
+	_attributes.BorderMode = props.BorderMode
+	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.ClipsDescendants = props.ClipsDescendants
+	_attributes.Interactable = props.Interactable
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.NextSelectionDown = props.NextSelectionDown
+	_attributes.NextSelectionLeft = props.NextSelectionLeft
+	_attributes.NextSelectionRight = props.NextSelectionRight
+	_attributes.NextSelectionUp = props.NextSelectionUp
+	_attributes.Position = SizeHelper:GetPosition(props)
+	_attributes.Rotation = props.Rotation
+	_attributes.Selectable = props.Selectable
+	_attributes.SelectionGroup = props.SelectionGroup
+	_attributes.SelectionImageObject = props.SelectionImageObject
+	_attributes.SelectionOrder = props.SelectionOrder
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.new(UDim.new(1, 0), height))
+	_attributes.SizeConstraint = props.SizeConstraint
+	_attributes.Visible = props.Visible
+	_attributes.ZIndex = props.ZIndex
+	_attributes.AutoLocalize = props.AutoLocalize
+	_attributes.RootLocalizationTable = props.RootLocalizationTable
+	_attributes.Style = props.Style
+	_attributes.Change = props.Change
+	_attributes.Event = props.Event
 	local _exp = React.createElement("frame", {
 		Size = UDim2.new(UDim.new(1, 0), SizeHelper:toUDim(theme.bar.height)),
 		Position = UDim2.fromScale(0.5, 0.5),
@@ -260,18 +298,18 @@ local Slider = React.forwardRef(function(props, ref)
 	}), React.createElement("uicorner", {
 		CornerRadius = SizeHelper:toUDim(theme.bar.cornerRadius),
 	}))
-	local _attributes = {
+	local _attributes_1 = {
 		ref = containerRef,
 	}
 	local _exp_1 = UDim2.fromScale(1, 1)
 	local _uDim2 = UDim2.new(padding + padding, UDim.new(0, 0))
-	_attributes.Size = _exp_1 - _uDim2
-	_attributes.BackgroundTransparency = 1
-	_attributes.Position = UDim2.fromScale(0.5, 0.5)
-	_attributes.AnchorPoint = Vector2.new(0.5, 0.5)
-	local _condition_1 = props.highlight ~= nil
-	if _condition_1 then
-		local _attributes_1 = {
+	_attributes_1.Size = _exp_1 - _uDim2
+	_attributes_1.BackgroundTransparency = 1
+	_attributes_1.Position = UDim2.fromScale(0.5, 0.5)
+	_attributes_1.AnchorPoint = Vector2.new(0.5, 0.5)
+	local _condition_2 = props.highlight ~= nil
+	if _condition_2 then
+		local _attributes_2 = {
 			BackgroundColor3 = theme.bar.highlight.backgroundColor,
 			BackgroundTransparency = theme.bar.highlight.backgroundTransparency,
 		}
@@ -291,8 +329,8 @@ local Slider = React.forwardRef(function(props, ref)
 			end
 			_result = _result_1
 		end
-		_attributes_1.Position = _result
-		_attributes_1.AnchorPoint = if props.highlight == "end" then Vector2.new(1, 0.5) else Vector2.new(0, 0.5)
+		_attributes_2.Position = _result
+		_attributes_2.AnchorPoint = if props.highlight == "end" then Vector2.new(1, 0.5) else Vector2.new(0, 0.5)
 		local _result_1
 		if props.highlight == "start" then
 			local _uDim2_1 = UDim2.new(UDim.new(firstPosition, 0), SizeHelper:toUDim(theme.bar.height))
@@ -301,24 +339,24 @@ local Slider = React.forwardRef(function(props, ref)
 		else
 			local _result_2
 			if props.highlight == "end" then
-				local _condition_2 = secondPosition
-				if _condition_2 == nil then
-					_condition_2 = firstPosition
+				local _condition_3 = secondPosition
+				if _condition_3 == nil then
+					_condition_3 = firstPosition
 				end
-				local _uDim2_1 = UDim2.new(UDim.new(1 - _condition_2, 0), SizeHelper:toUDim(theme.bar.height))
+				local _uDim2_1 = UDim2.new(UDim.new(1 - _condition_3, 0), SizeHelper:toUDim(theme.bar.height))
 				local _uDim2_2 = UDim2.new(padding, UDim.new(0, 0))
 				_result_2 = _uDim2_1 + _uDim2_2
 			else
-				local _condition_2 = secondPosition
-				if _condition_2 == nil then
-					_condition_2 = 0
+				local _condition_3 = secondPosition
+				if _condition_3 == nil then
+					_condition_3 = 0
 				end
-				_result_2 = UDim2.new(UDim.new(_condition_2 - firstPosition, 0), SizeHelper:toUDim(theme.bar.height))
+				_result_2 = UDim2.new(UDim.new(_condition_3 - firstPosition, 0), SizeHelper:toUDim(theme.bar.height))
 			end
 			_result_1 = _result_2
 		end
-		_attributes_1.Size = _result_1
-		_condition_1 = (React.createElement("frame", _attributes_1, React.createElement("uistroke", {
+		_attributes_2.Size = _result_1
+		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uistroke", {
 			Thickness = theme.bar.borderThickness,
 			Color = theme.bar.highlight.borderColor,
 		}), React.createElement("uicorner", {
@@ -340,14 +378,14 @@ local Slider = React.forwardRef(function(props, ref)
 		local _exp_4 = (hoveredHandle == index or (dragging and activeHandleRef.current == index)) and (React.createElement(BoxShadow, {
 			["box-shadow"] = theme.handle.boxShadow,
 		}))
-		local _attributes_1 = {}
-		local _condition_2 = theme.handle.aspectRation
-		if _condition_2 == nil then
-			_condition_2 = 1
+		local _attributes_2 = {}
+		local _condition_3 = theme.handle.aspectRatio
+		if _condition_3 == nil then
+			_condition_3 = 1
 		end
-		_attributes_1.AspectRatio = _condition_2
-		_attributes_1.DominantAxis = Enum.DominantAxis.Height
-		_attributes_1.AspectType = Enum.AspectType.ScaleWithParentSize
+		_attributes_2.AspectRatio = _condition_3
+		_attributes_2.DominantAxis = Enum.DominantAxis.Height
+		_attributes_2.AspectType = Enum.AspectType.ScaleWithParentSize
 		return React.createElement("frame", {
 			key = index,
 			Position = UDim2.fromScale(position, 0.5),
@@ -369,17 +407,13 @@ local Slider = React.forwardRef(function(props, ref)
 					end)
 				end,
 			},
-		}, _exp_2, _exp_3, _exp_4, React.createElement("uiaspectratioconstraint", _attributes_1))
+		}, _exp_2, _exp_3, _exp_4, React.createElement("uiaspectratioconstraint", _attributes_2))
 	end
 	for _k, _v in handles do
 		_newValue[_k] = _callback(_v, _k - 1, handles)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", {
-		ref = ref,
-		Size = UDim2.new(UDim.new(1, 0), height),
-		BackgroundTransparency = 1,
-	}, _exp, React.createElement("frame", _attributes, _condition_1, _newValue))
+	return React.createElement("frame", _attributes, _exp, React.createElement("frame", _attributes_1, _condition_2, _newValue))
 end)
 return {
 	Slider = Slider,

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

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './Checkbox';
 export * from './HoverButton';
+export * from './Increment';
 export * from './Input';
 export * from './Select';
 export * from './Slider';

package/out/Components/Input/init.luau

@@ -10,6 +10,9 @@ end
 for _k, _v in TS.import(script, script, "HoverButton") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Increment") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Input") or {} do
 	exports[_k] = _v
 end

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

@@ -25,7 +25,7 @@ export interface AccordionProps extends ScalableElementProps {
     value?: string;
     onValueChange?: (value: string | undefined) => void;
 }
-type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<Frame>> & {
+type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<ImageLabel>> & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     Content: typeof AccordionContent;

package/out/Components/Layout/Accordion.luau

@@ -53,11 +53,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,
 		})
@@ -103,12 +103,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)
@@ -163,8 +164,8 @@ 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),

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/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/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 {};