azul-sync 1.3.0

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/LabeledTextInput.luau

@@ -0,0 +1,222 @@
+----------------------------------------
+--
+-- LabeledTextInput.lua
+--
+-- Creates a frame containing a label and a text input control.
+--
+----------------------------------------
+GuiUtilities = require("../GuiUtilities")
+
+local kTextInputWidth = 130
+local kTextBoxInternalPadding = 4
+local kReadOnlyTransparency = 0.55
+
+LabeledTextInputClass = {}
+LabeledTextInputClass.__index = LabeledTextInputClass
+
+--- LabeledTextInputClass constructor.
+--- @param nameSuffix string -- The name suffix of the text input.
+--- @param labelText string -- The text of the label.
+--- @param defaultValue string? -- The default value of the text input.
+--- @param readonly boolean? -- Whether or not it is read only.
+--- @return LabeledTextInputClass The text input class object.
+function LabeledTextInputClass.new(nameSuffix: string, labelText: string, defaultValue: string?, readonly: boolean?)
+	local self = {}
+	setmetatable(self, LabeledTextInputClass)
+
+	-- Note: we are using "graphemes" instead of characters.
+	-- In modern text-manipulation-fu, what with internationalization,
+	-- emojis, etc, it's not enough to count characters, particularly when
+	-- concerned with "how many <things> am I rendering?".
+	-- We are using the
+	self._MaxGraphemes = 50
+
+	self._valueChangedFunction = nil
+
+	defaultValue = defaultValue or ""
+
+	local frame = GuiUtilities.MakeStandardFixedHeightFrame("TextInput " .. nameSuffix)
+	self._frame = frame
+
+	local label = GuiUtilities.MakeStandardPropertyLabel(labelText)
+	label.Parent = frame
+	self._label = label
+
+	self._value = defaultValue
+
+	-- Dumb hack to add padding to text box,
+	local textBoxWrapperFrame = Instance.new("Frame")
+	textBoxWrapperFrame.Name = "Wrapper"
+	textBoxWrapperFrame.Size = UDim2.new(0, kTextInputWidth, 0.6, 0)
+	textBoxWrapperFrame.Position = UDim2.new(0, GuiUtilities.StandardLineElementLeftMargin, 0.5, 0)
+	textBoxWrapperFrame.AnchorPoint = Vector2.new(0, 0.5)
+	textBoxWrapperFrame.Parent = frame
+	GuiUtilities.syncGuiElementInputFieldColor(textBoxWrapperFrame)
+	GuiUtilities.syncGuiElementBorderColor(textBoxWrapperFrame)
+
+	local textBox = Instance.new("TextBox")
+	textBox.Parent = textBoxWrapperFrame
+	textBox.Name = "TextBox"
+	textBox.Text = defaultValue
+	textBox.PlaceholderText = defaultValue
+	textBox.Font = Enum.Font.SourceSans
+	textBox.TextSize = 15
+	textBox.BorderSizePixel = 0
+	textBox.BackgroundTransparency = 1
+	textBox.TextXAlignment = Enum.TextXAlignment.Left
+	textBox.Size = UDim2.new(1, -kTextBoxInternalPadding, 1, GuiUtilities.kTextVerticalFudge)
+	textBox.Position = UDim2.new(0, kTextBoxInternalPadding, 0, 0)
+	textBox.ClipsDescendants = true
+	-- textBox.ClearTextOnFocus = true
+	textBox.ClearTextOnFocus = false -- Changed to false to prevent accidental data loss.
+	textBox.TextEditable = true
+
+	GuiUtilities.syncGuiElementBackgroundColor(textBox)
+
+	textBox:GetPropertyChangedSignal("Text"):Connect(function()
+		-- Never let the text be too long.
+		-- Careful here: we want to measure number of graphemes, not characters,
+		-- in the text, and we want to clamp on graphemes as well.
+		if utf8.len(self._textBox.Text) > self._MaxGraphemes then
+			local count = 0
+			for start, stop in utf8.graphemes(self._textBox.Text) do
+				count = count + 1
+				if count > self._MaxGraphemes then
+					-- We have gone one too far.
+					-- clamp just before the beginning of this grapheme.
+					self._textBox.Text = string.sub(self._textBox.Text, 1, start - 1)
+					break
+				end
+			end
+			-- Don't continue with rest of function: the resetting of "Text" field
+			-- above will trigger re-entry.  We don't need to trigger value
+			-- changed function twice.
+			return
+		end
+
+		self._value = self._textBox.Text
+		if self._valueChangedFunction then self._valueChangedFunction(self._value) end
+	end)
+
+	self._textBox = textBox
+	self._textBoxThemeConnection = nil :: RBXScriptConnection?
+	self._textBoxThemeFontConnection = nil :: RBXScriptConnection?
+	self:SetReadOnly(readonly)
+
+	return self
+end
+
+--- Sets the function to be called when the value changes.
+--- @param vcf () -> () -- The function to call when the value changes.
+function LabeledTextInputClass:SetValueChangedFunction(vcf: (newValue: string) -> ())
+	self._valueChangedFunction = vcf
+end
+
+--- Returns the UI frame associated with this input.
+--- @return Frame -- The frame object.
+function LabeledTextInputClass:GetFrame(): Frame
+	return self._frame
+end
+
+--- Gets the text box itself.
+--- @return TextBox -- The text box.
+function LabeledTextInputClass:GetTextBox(): TextBox
+	return self._textBox
+end
+
+--- Returns the maximum number of graphemes allowed.
+--- @return number -- The maximum grapheme count.
+function LabeledTextInputClass:GetMaxGraphemes(): number
+	return self._MaxGraphemes
+end
+
+--- Sets the maximum number of graphemes allowed.
+--- @param newValue number -- The new maximum grapheme count.
+function LabeledTextInputClass:SetMaxGraphemes(newValue)
+	self._MaxGraphemes = newValue
+end
+
+--- Returns the current value of the input.
+--- @return string -- The current value.
+function LabeledTextInputClass:GetValue(): string
+	return self._value
+end
+
+--- Sets this input text value.
+--- @param newValue string -- The value to set.
+function LabeledTextInputClass:SetValue(newValue: string)
+	if self._value ~= newValue then self._textBox.Text = newValue end
+end
+
+--- Gets this input text editable state.
+--- @return boolean -- This input text editable state.
+function LabeledTextInputClass:GetTextEditable(state: boolean)
+	return self._textBox.TextEditable
+end
+
+--- Sets this input text editable state.
+---
+--- If not editable the user can't edit the contents of this input text.
+--- @param state boolean -- Whether or not to set it as editable.
+function LabeledTextInputClass:SetTextEditable(state: boolean)
+	self._textBox.TextEditable = state
+end
+
+--- Sets this input text clear text on focus state.
+---
+--- If true the text inside this input text are cleared once the user focus it.
+--- @param state boolean -- Whether or not to set it to clear text on focus.
+function LabeledTextInputClass:SetClearTextOnFocusEnabled(state: boolean)
+	self._textBox.ClearTextOnFocus = state
+end
+
+--- Sets the function that runs when focus is lost.
+--- @param funct (enterPressed: boolean, inputThatCausedFocusLoss: InputObject) -> () -- The function to run.
+function LabeledTextInputClass:SetFocusLostFunction(funct: (
+	enterPressed: boolean,
+	inputThatCausedFocusLoss: InputObject
+) -> ())
+	self._textBox.FocusLost:Connect(funct)
+end
+
+--- Gets this input text read-only state.
+--- @return boolean -- This input text read-only state.
+function LabeledTextInputClass:GetReadOnly(): boolean
+	return self._readOnly
+end
+
+--- Sets this input text read-only state.
+---
+--- Read-only text inputs are not editable and have a greyed out appearance.
+--- @param state boolean -- Whether or not to set it as read-only.
+function LabeledTextInputClass:SetReadOnly(state: boolean)
+	self._readOnly = state
+	if self._textBoxThemeConnection then self._textBoxThemeConnection:Disconnect() end
+	if self._textBoxThemeFontConnection then self._textBoxThemeFontConnection:Disconnect() end
+	if self._readOnly then
+		self._textBox.BackgroundTransparency = kReadOnlyTransparency
+		self._textBox.TextEditable = false
+		self._textBox.ClearTextOnFocus = false
+		self._textBoxThemeConnection = GuiUtilities.syncGuiElementColorCustom(
+			self._textBox,
+			"TextColor3",
+			Enum.StudioStyleGuideColor.MainText,
+			Enum.StudioStyleGuideModifier.Disabled
+		)
+		self._textBoxThemeFontConnection = GuiUtilities.syncGuiElementColorCustom(
+			self._label,
+			"TextColor3",
+			Enum.StudioStyleGuideColor.MainText,
+			Enum.StudioStyleGuideModifier.Disabled
+		)
+	else
+		self._textBox.BackgroundTransparency = 1
+		self._textBox.TextEditable = true
+		self._textBoxThemeConnection =
+			GuiUtilities.syncGuiElementColorCustom(self._textBox, "TextColor3", Enum.StudioStyleGuideColor.MainText)
+		self._textBoxThemeFontConnection =
+			GuiUtilities.syncGuiElementColorCustom(self._label, "TextColor3", Enum.StudioStyleGuideColor.MainText)
+	end
+end
+
+return LabeledTextInputClass

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/LabeledToggleButton.luau

@@ -0,0 +1,73 @@
+----------------------------------------
+--
+-- LabeledToggleButtonClass.lua
+--
+-- Creates a frame containing a label and a toggle button.
+--
+----------------------------------------
+GuiUtilities = require("../GuiUtilities")
+LabeledCheckbox = require("./LabeledCheckbox")
+
+local kToggleOffDark = "rbxasset://textures/RoactStudioWidgets/toggle_off_dark.png"
+local kToggleOnDark = "rbxasset://textures/RoactStudioWidgets/toggle_on_dark.png"
+
+local kToggleOffLight = "rbxasset://textures/RoactStudioWidgets/toggle_off_light.png"
+local kToggleOnLight = "rbxasset://textures/RoactStudioWidgets/toggle_on_light.png"
+
+local kToggleOffDisabledDark = "rbxasset://textures/RoactStudioWidgets/toggle_disable_dark.png"
+local kToggleOnDisabledDark = "rbxasset://textures/RoactStudioWidgets/toggle_on_disable_dark.png"
+
+local kToggleOffDisabledLight = "rbxasset://textures/RoactStudioWidgets/toggle_disable_light.png"
+local kToggleOnDisabledLight = "rbxasset://textures/RoactStudioWidgets/toggle_on_disable_light.png"
+
+local kFrameSizeX = 28
+local kFrameSizeY = 16
+
+LabeledToggleButtonClass = {}
+LabeledToggleButtonClass.__index = LabeledToggleButtonClass
+setmetatable(LabeledToggleButtonClass, LabeledCheckbox)
+
+--- LabeledToggleButtonClass constructor.
+--- @param nameSuffix string -- Suffix to append to the name of the UI elements.
+--- @param labelText string -- The label displayed next to the toggle button.
+--- @return LabeledToggleButtonClass -- A new instance of the labeled toggle button class.
+function LabeledToggleButtonClass.new(nameSuffix: string, labelText: string)
+  local newButton = LabeledCheckbox.new(nameSuffix, labelText, false)
+  setmetatable(newButton, LabeledToggleButtonClass)
+
+  newButton:GetFrame().Name = "TBF" .. nameSuffix
+  newButton._button.Size = UDim2.new(0, kFrameSizeX, 0, kFrameSizeY)
+  newButton._button.Image = ""
+  newButton._button.ImageColor3 = Color3.new(1,1,1)
+  newButton._button.BackgroundTransparency = 1
+  newButton._checkImage.ImageColor3 = Color3.new(1,1,1)
+
+  newButton:_UpdateAppearance()
+
+  return newButton
+end
+
+function LabeledToggleButtonClass:_MaybeToggleState()
+  if (not self._disabled) then 
+    self:SetValue(not self._value)
+  end
+end
+
+function LabeledToggleButtonClass:_UpdateAppearance()
+  local themeName = GuiUtilities:GetThemeName()
+  if self:GetValue() then
+    if self:GetDisabled() then
+      self._checkImage.Image = if themeName == "Light" then kToggleOnDisabledLight else kToggleOnDisabledDark
+    else
+      self._checkImage.Image = if themeName == "Light" then kToggleOnLight else kToggleOnDark
+    end
+  else
+    if self:GetDisabled() then
+      self._checkImage.Image = if themeName == "Light" then kToggleOffDisabledLight else kToggleOffDisabledDark
+    else
+      self._checkImage.Image = if themeName == "Light" then kToggleOffLight else kToggleOffDark
+    end
+  end
+end
+
+return LabeledToggleButtonClass

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/StatefulImageButton.luau

@@ -0,0 +1,125 @@
+----------------------------------------
+--
+-- StatefulImageButton.lua
+--
+-- Image button.
+-- Has custom image for when "selected"
+-- Uses shading to indicate hover and click states.
+--
+----------------------------------------
+GuiUtilities = require("../GuiUtilities")
+
+StatefulImageButtonClass = {}
+StatefulImageButtonClass.__index = StatefulImageButtonClass
+
+--- StatefulImageButtonClass constructor.
+--- @param buttonName string -- The name of the button instance.
+--- @param imageAsset string -- The asset ID or path for the button's image.
+--- @param buttonSize UDim2 -- The size of the button.
+--- @return StatefulImageButtonClass -- A new instance of the StatefulImageButtonClass.
+function StatefulImageButtonClass.new(buttonName: string, imageAsset: string, buttonSize: UDim2)
+  local self = {}
+  setmetatable(self, StatefulImageButtonClass)
+
+  self._clickedFunction = nil
+
+  local button = Instance.new("ImageButton")
+  --button.Parent = parent
+  button.Image = imageAsset
+  button.BackgroundTransparency = 1
+  button.BorderSizePixel = 0
+  button.Size = buttonSize
+  button.Name = buttonName
+
+  self._button = button
+
+  self._hovered = false
+  self._clicked = false
+  self._selected = false
+
+  button.InputBegan:Connect(function(input)
+    if (input.UserInputType == Enum.UserInputType.MouseMovement) then               
+      self._hovered = true
+      self:_UpdateButtonVisual()
+    end
+  end)
+
+
+  button.InputEnded:Connect(function(input)
+    if (input.UserInputType == Enum.UserInputType.MouseMovement) then               
+      self._hovered = false
+      self._clicked = false
+      self:_UpdateButtonVisual()
+    end
+  end)    
+
+  button.MouseButton1Down:Connect(function()
+    self._clicked = true
+    self:_UpdateButtonVisual()
+  end)
+
+  button.MouseButton1Up:Connect(function()
+    self._clicked = false
+    self:_UpdateButtonVisual()
+  end)
+
+  button.Activated:Connect(function (inputObject, timesPressed)
+    if self._clickedFunction then
+      self._clickedFunction(inputObject, timesPressed)
+    end
+  end)
+  
+  self:_UpdateButtonVisual()
+
+  return self
+end
+
+-- Backwards compatibility (should be removed in the future)
+StatefulImageButtonClass.setSelected = StatefulImageButtonClass.SetSelected
+StatefulImageButtonClass.getSelected = StatefulImageButtonClass.GetSelected
+StatefulImageButtonClass.getButton = StatefulImageButtonClass.GetButton
+
+function StatefulImageButtonClass:_UpdateButtonVisual()
+  if (self._selected) then 
+    self._button.ImageTransparency = 0
+    self._button.ImageColor3 = Color3.new(1,1,1) 
+  else 
+    self._button.ImageTransparency = 0.5
+    self._button.ImageColor3 = Color3.new(.5,.5,.5)
+  end
+
+  if (self._clicked) then 
+    self._button.BackgroundTransparency = 0.8
+  elseif (self._hovered) then 
+    self._button.BackgroundTransparency = 0.9
+  else
+    self._button.BackgroundTransparency = 1
+  end
+end
+
+--- Sets the selection state of the button.
+--- @param selected boolean -- Whether the button should appear selected.
+function StatefulImageButtonClass:SetSelected(selected)
+  self._selected = selected
+  self:_updateButtonVisual()
+end
+
+--- Gets the current selection state of the button.
+--- @return boolean -- True if the button is selected, false otherwise.
+function StatefulImageButtonClass:GetSelected()
+  return self._selected
+end
+
+--- Returns the underlying ImageButton instance.
+--- @return ImageButton -- The ImageButton instance.
+function StatefulImageButtonClass:GetButton()
+  return self._button
+end
+
+--- Sets the function to be called when the button is clicked.
+--- @param cf (inputObject: InputObject, timesPressed: number) -> () -- A callback function or nil to remove the function.
+function StatefulImageButtonClass:SetClickedFunction(cf: (inputObject: InputObject, timesPressed: number) -> () | nil)
+  self._clickedFunction = cf
+end
+
+return StatefulImageButtonClass

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/VerticalScrollingFrame.luau

@@ -0,0 +1,100 @@
+----------------------------------------
+--
+-- VerticalScrollingFrame.lua
+--
+-- Creates a scrolling frame that automatically updates canvas size
+--
+----------------------------------------
+
+local GuiUtilities = require("../GuiUtilities")
+
+local VerticalScrollingFrame = {}
+VerticalScrollingFrame.__index = VerticalScrollingFrame
+
+--- VerticalScrollingFrame constructor.
+--- @param suffix string -- A suffix to append to the names of internal GUI elements for uniqueness.
+--- @return table -- A new instance of the vertical scrolling frame class.
+function VerticalScrollingFrame.new(suffix: string)
+  local self = {}
+  setmetatable(self, VerticalScrollingFrame)
+  
+  local section = Instance.new("Frame")
+  section.BorderSizePixel = 0
+  section.Size = UDim2.new(1, 0, 1, 0)
+  section.Position = UDim2.new(0, 0, 0, 0)
+  section.BackgroundTransparency = 1
+  section.Name = "VerticalScrollFrame" .. suffix
+  
+  local scrollBackground = Instance.new("Frame")
+  scrollBackground.Name = "ScrollbarBackground"
+  scrollBackground.BackgroundColor3 = Color3.fromRGB(238, 238, 238)
+  scrollBackground.BorderColor3 = Color3.fromRGB(182, 182, 182)
+  scrollBackground.Size = UDim2.new(0, 15, 1, -2)
+  scrollBackground.Position = UDim2.new(1, -16, 0, 1)
+  scrollBackground.Parent = section
+  scrollBackground.ZIndex = 2;
+  
+  local scrollFrame = Instance.new("ScrollingFrame")
+  scrollFrame.Name = "ScrollFrame" .. suffix
+  scrollFrame.VerticalScrollBarPosition = Enum.VerticalScrollBarPosition.Right
+  scrollFrame.VerticalScrollBarInset = Enum.ScrollBarInset.ScrollBar
+  scrollFrame.ElasticBehavior = Enum.ElasticBehavior.Never
+  scrollFrame.ScrollBarThickness = 17
+  scrollFrame.BorderSizePixel = 0
+  scrollFrame.BackgroundTransparency = 1
+  scrollFrame.ZIndex = 2
+  scrollFrame.TopImage = "http://www.roblox.com/asset/?id=1533255544"
+  scrollFrame.MidImage = "http://www.roblox.com/asset/?id=1535685612"
+  scrollFrame.BottomImage = "http://www.roblox.com/asset/?id=1533256504"
+  scrollFrame.Size = UDim2.new(1, 0, 1, 0)
+  scrollFrame.Position = UDim2.new(0, 0, 0, 0)
+  scrollFrame.Parent = section
+  
+  local uiListLayout = Instance.new("UIListLayout")
+  uiListLayout.SortOrder = Enum.SortOrder.LayoutOrder
+  uiListLayout.Parent = scrollFrame
+  
+  self._section = section
+  self._scrollFrame = scrollFrame
+  self._scrollBackground = scrollBackground
+  self._uiListLayout = uiListLayout
+  
+  scrollFrame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function() self:_updateScrollingFrameCanvas() end)
+  uiListLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function() self:_updateScrollingFrameCanvas() end)
+  self:_updateScrollingFrameCanvas()
+  
+  GuiUtilities.syncGuiElementScrollColor(scrollFrame)
+  GuiUtilities.syncGuiElementBorderColor(scrollBackground)
+  GuiUtilities.syncGuiElementTitleColor(scrollBackground)
+  
+  return self
+end
+
+function VerticalScrollingFrame:_updateScrollbarBackingVisibility()
+  self._scrollBackground.Visible = self._scrollFrame.AbsoluteSize.y < self._uiListLayout.AbsoluteContentSize.y
+end
+
+function VerticalScrollingFrame:_updateScrollingFrameCanvas()
+  self._scrollFrame.CanvasSize = UDim2.new(0, 0, 0, self._uiListLayout.AbsoluteContentSize.Y)
+  self:_updateScrollbarBackingVisibility()
+end
+
+--- Returns the internal ScrollingFrame that holds the scrollable content.
+--- @return ScrollingFrame -- The scrolling content frame.
+function VerticalScrollingFrame:GetContentsFrame(): Frame
+  return self._scrollFrame
+end
+
+--- Returns the top-level section frame that contains the scrollbar and scrollable content.
+--- @return Frame -- The outer section frame.
+function VerticalScrollingFrame:GetSectionFrame(): Frame
+  return self._section
+end
+
+--- Adds a child frame to the scrollable content area.
+--- @param childFrame GuiObject -- The GUI object to be added to the scrollable content.
+function VerticalScrollingFrame:AddChild(childFrame)
+  childFrame.Parent = self._scrollFrame
+end
+
+return VerticalScrollingFrame

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/VerticalSpacer.luau

@@ -0,0 +1,35 @@
+----------------------------------------
+--
+-- VerticalSpacerClass.lua
+--
+-- Creates an empty space of a fixed height
+--
+----------------------------------------
+GuiUtilities = require("../GuiUtilities")
+
+local VerticalSpacerClass = {}
+VerticalSpacerClass.__index = VerticalSpacerClass
+
+--- VerticalSpacerClass constructor.
+--- @param nameSuffix string -- A unique suffix to append to the spacer's name.
+--- @param height number? -- Optional height of the spacer in pixels. Defaults to a preset value if not provided.
+--- @return VerticalSpacerClass -- A new instance of the vertical spacer component.
+function VerticalSpacerClass.new(nameSuffix: string, height: number?)
+  local self = setmetatable({}, VerticalSpacerClass)
+
+  local frame = GuiUtilities.MakeStandardFixedHeightFrame("VSPF " .. nameSuffix)
+  frame.BackgroundTransparency = 1
+  if height then frame.Size = UDim2.new(1, 0, 0, height) end
+  
+  self._frame = frame
+  
+  return self
+end
+
+--- Returns the UI frame representing the vertical spacer.
+--- @return Frame -- The frame instance used for layout spacing.
+function VerticalSpacerClass:GetFrame(): Frame
+  return self._frame
+end
+
+return VerticalSpacerClass

package/plugin/sync/ReplicatedFirst/AzulCompanionPlugin/StudioWidgets/Components/VerticallyScalingListFrame.luau

@@ -0,0 +1,107 @@
+----------------------------------------
+--
+-- VerticallyScalingListFrame
+--
+-- Creates a frame that organizes children into a list layout.
+-- Will scale dynamically as children grow.
+--
+----------------------------------------
+GuiUtilities = require("../GuiUtilities")
+
+VerticallyScalingListFrameClass = {}
+VerticallyScalingListFrameClass.__index = VerticallyScalingListFrameClass
+
+local kBottomPadding = 10
+
+--- VerticallyScalingListFrameClass constructor.
+--- @param nameSuffix string -- Suffix to append to the name of the scroll frame components.
+--- @return VerticallyScalingListFrameClass -- A new instance of the vertically scaling list frame class.
+function VerticallyScalingListFrameClass.new(nameSuffix: string)
+  local self = {}
+  setmetatable(self, VerticallyScalingListFrameClass)
+
+  self._resizeCallback = nil
+  
+  local frame = Instance.new('Frame')
+  frame.Name = 'VSLFrame' .. nameSuffix
+  frame.Size = UDim2.new(1, 0, 0, 0)
+  frame.BackgroundTransparency = 0
+  frame.BorderSizePixel = 0
+  GuiUtilities.syncGuiElementBackgroundColor(frame)
+
+  self._frame = frame
+  
+  local uiListLayout = Instance.new('UIListLayout')
+  uiListLayout.SortOrder = Enum.SortOrder.LayoutOrder
+  uiListLayout.Parent = frame
+  self._uiListLayout = uiListLayout
+
+  local function updateSizes()
+    self._frame.Size = UDim2.new(1, 0, 0, uiListLayout.AbsoluteContentSize.Y)
+    if (self._resizeCallback) then 
+      self._resizeCallback()
+    end
+  end
+  self._uiListLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(updateSizes)
+  updateSizes()
+
+  self._childCount = 0
+
+  return self
+end
+
+--- Adds a transparent bottom padding frame to the list.
+function VerticallyScalingListFrameClass:AddBottomPadding()
+  local frame = Instance.new("Frame")
+  frame.Name = "BottomPadding"
+  frame.BackgroundTransparency = 1
+  frame.Size = UDim2.new(1, 0, 0, kBottomPadding)
+  frame.LayoutOrder = 1000
+  frame.Parent = self._frame
+end
+
+--- Returns the internal UI frame containing all children.
+--- @return Frame -- The internal frame used for layout.
+function VerticallyScalingListFrameClass:GetFrame()
+  return self._frame
+end
+
+--- Adds a child frame to the list with automatic layout order.
+--- @param childFrame GuiObject -- The child frame to add to the list.
+function VerticallyScalingListFrameClass:AddChild(childFrame: GuiObject)
+  childFrame.LayoutOrder = self._childCount
+  self._childCount = self._childCount + 1
+  childFrame.Parent = self._frame
+end
+
+--- Sets a callback function to be called when the frame is resized.
+--- @param callback function -- The function to call on resize.
+function VerticallyScalingListFrameClass:SetCallbackOnResize(callback: () -> ())
+  self._resizeCallback = callback
+end
+
+--- Sets the horizontal alignment of elements in the UI list layout.
+--- @param alignment Enum.HorizontalAlignment -- The desired horizontal alignment.
+function VerticallyScalingListFrameClass:SetHorizontalAlignment(alignment: Enum.HorizontalAlignment)
+  self._uiListLayout.HorizontalAlignment = alignment
+end
+
+--- Sets the vertical alignment of elements in the UI list layout.
+--- @param alignment Enum.VerticalAlignment -- The desired vertical alignment.
+function VerticallyScalingListFrameClass:SetVerticalAlignment(alignment: Enum.VerticalAlignment)
+  self._uiListLayout.VerticalAlignment = alignment
+end
+
+--- Sets the fill direction of the UIListLayout inside the frame.
+--- @param fillDirection Enum.FillDirection -- The direction in which UI elements will be laid out (Vertical or Horizontal).
+function VerticallyScalingListFrameClass:SetFillDirection(fillDirection: Enum.FillDirection)
+  self._uiListLayout.FillDirection = fillDirection
+end
+
+--- Sets the padding between UI elements in the list layout.
+--- @param padding UDim -- The space to apply between child elements.
+function VerticallyScalingListFrameClass:SetLayoutPadding(padding: UDim)
+  self._uiListLayout.Padding = padding
+end
+
+return VerticallyScalingListFrameClass