@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Surface/ProgressBar.luau

@@ -0,0 +1,230 @@
+-- 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 CssHelper = _Helpers.CssHelper
+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 Gradient = _Decorator.Gradient
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local Container = _Layout.Container
+local HStack = _Layout.HStack
+local VStack = _Layout.VStack
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local function defaultValueFormatter(value, max)
+	local percent = if max > 0 then (value / max) * 100 else 0
+	return `{math.round(percent)}%`
+end
+local ProgressBar = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local progressBarTheme = theme.components.progressBar
+	local _condition = props.max
+	if _condition == nil then
+		_condition = 100
+	end
+	local maxValue = math.max(_condition, 0)
+	local clampedValue = math.clamp(props.value, 0, maxValue)
+	local targetProgress = if maxValue > 0 then clampedValue / maxValue else 0
+	local duration = progressBarTheme.animation.duration
+	local progress, progressTween = useTween(targetProgress, {
+		duration = duration,
+	})
+	React.useEffect(function()
+		progressTween:setGoal(targetProgress, {
+			duration = duration,
+		})
+		if duration == 0 then
+			progressTween:setPosition(targetProgress)
+		end
+	end, { targetProgress, duration, progressTween })
+	local colors = ColorHelper:getIntentColors(theme, props.intent, "default", progressBarTheme.fill.intents)
+	local height = SizeHelper:toUDim(progressBarTheme.height[props.scale or theme.default.scale])
+	local fillSize = progress:map(function(value)
+		return UDim2.fromScale(value, 1)
+	end)
+	local fillPosition = UDim2.fromScale(0, 0)
+	local stripeTheme = progressBarTheme.fill.stripe
+	local _condition_1 = props.striped
+	if _condition_1 == nil then
+		local _result = stripeTheme
+		if _result ~= nil then
+			_result = _result.enabled
+		end
+		_condition_1 = _result
+		if _condition_1 == nil then
+			_condition_1 = false
+		end
+	end
+	local striped = _condition_1
+	local _condition_2 = props.stripeDuration
+	if _condition_2 == nil then
+		local _result = stripeTheme
+		if _result ~= nil then
+			_result = _result.duration
+		end
+		_condition_2 = _result
+		if _condition_2 == nil then
+			_condition_2 = 0.75
+		end
+	end
+	local stripeDuration = _condition_2
+	local _condition_3 = props.stripeDirection
+	if _condition_3 == nil then
+		local _result = stripeTheme
+		if _result ~= nil then
+			_result = _result.direction
+		end
+		_condition_3 = _result
+	end
+	local rawStripeDirection = _condition_3
+	local stripeDirection = if rawStripeDirection == -1 then -1 else 1
+	local _result = stripeTheme
+	if _result ~= nil then
+		_result = _result.image
+	end
+	local resolvedStripeImage = CssHelper:resolveBackgroundImage(_result)
+	local stripeTileSize = resolvedStripeImage.TileSize or UDim2.fromOffset(16, 16)
+	local stripeTileWidth = if stripeTileSize.X.Offset ~= 0 then stripeTileSize.X.Offset else 16
+	local stripeProgress, stripeTween = useTween(0, {
+		duration = stripeDuration,
+		easing = "linear",
+		repeats = math.huge,
+		reverses = false,
+	})
+	React.useEffect(function()
+		if not striped then
+			return nil
+		end
+		stripeTween:setPosition(0)
+		stripeTween:setGoal(1, {
+			duration = stripeDuration,
+		})
+	end, { striped, stripeDuration, stripeTween })
+	local stripePosition = stripeProgress:map(function(value)
+		return if stripeDirection == 1 then UDim2.fromOffset(-stripeTileWidth + value * stripeTileWidth, 0) else UDim2.fromOffset(-value * stripeTileWidth, 0)
+	end)
+	local showHeader = props.label ~= nil or props.showValue == true
+	local formattedValue = if props.showValue then (props.valueFormatter or defaultValueFormatter)(clampedValue, maxValue) else nil
+	local labelTypography = TypographyHelper:getTypography(theme, props.scale, progressBarTheme.header.label.typography)
+	local valueTypography = TypographyHelper:getTypography(theme, props.scale, progressBarTheme.header.value.typography or progressBarTheme.header.label.typography)
+	local _attributes = {}
+	local _condition_4 = props.name
+	if _condition_4 == nil then
+		_condition_4 = "ProgressBar"
+	end
+	_attributes.name = _condition_4
+	_attributes.ref = ref
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.new(UDim.new(1, 0), height))
+	local _condition_5 = props.ClipsDescendants
+	if _condition_5 == nil then
+		_condition_5 = true
+	end
+	_attributes.ClipsDescendants = _condition_5
+	_attributes.BackgroundColor3 = progressBarTheme.track.backgroundColor
+	_attributes.BackgroundTransparency = progressBarTheme.track.backgroundTransparency
+	_attributes.backgroundImage = progressBarTheme.track.backgroundImage
+	_attributes.backgroundGradient = progressBarTheme.track.backgroundGradient
+	local _exp = React.createElement("uistroke", {
+		key = "Stroke",
+		Thickness = progressBarTheme.track.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = progressBarTheme.track.borderColor,
+	})
+	local _exp_1 = React.createElement(Corners, {
+		radius = progressBarTheme.track.cornerRadius,
+	})
+	local _attributes_1 = {
+		key = "Fill",
+		Size = fillSize,
+		Position = fillPosition,
+		BackgroundColor3 = colors.backgroundColor,
+	}
+	local _condition_6 = colors.backgroundTransparency
+	if _condition_6 == nil then
+		_condition_6 = 0
+	end
+	_attributes_1.BackgroundTransparency = _condition_6
+	_attributes_1.BorderSizePixel = 0
+	_attributes_1.ClipsDescendants = true
+	local _exp_2 = React.createElement(Corners, {
+		radius = progressBarTheme.fill.cornerRadius,
+	})
+	local _exp_3 = React.createElement(Gradient, {
+		value = colors.backgroundGradient,
+	})
+	local _condition_7 = striped
+	if _condition_7 then
+		local _attributes_2 = {
+			key = "Stripe",
+			BackgroundTransparency = 1,
+		}
+		local _condition_8 = resolvedStripeImage.ImageTransparency
+		if _condition_8 == nil then
+			_condition_8 = 0.9
+		end
+		_attributes_2.ImageTransparency = _condition_8
+		_attributes_2.ImageColor3 = resolvedStripeImage.ImageColor3
+		_attributes_2.Size = UDim2.new(1, stripeTileWidth, 1, 0)
+		_attributes_2.Position = stripePosition
+		local _condition_9 = resolvedStripeImage.Image
+		if _condition_9 == nil then
+			_condition_9 = `rbxassetid://86644568183933`
+		end
+		_attributes_2.Image = _condition_9
+		_attributes_2.ScaleType = Enum.ScaleType.Tile
+		_attributes_2.TileSize = stripeTileSize
+		_condition_7 = (React.createElement("imagelabel", _attributes_2))
+	end
+	local track = (React.createElement(Container, _attributes, _exp, _exp_1, React.createElement("frame", _attributes_1, _exp_2, _exp_3, _condition_7)))
+	if not showHeader then
+		return track
+	end
+	local _attributes_2 = {}
+	local _condition_8 = props.name
+	if _condition_8 == nil then
+		_condition_8 = "ProgressBar"
+	end
+	_attributes_2.key = _condition_8
+	_attributes_2.BackgroundTransparency = 1
+	_attributes_2.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 0))
+	_attributes_2.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes_2.Position = SizeHelper:GetPosition(props)
+	_attributes_2.AnchorPoint = SizeHelper:GetAnchor(props)
+	_attributes_2.ZIndex = props.ZIndex
+	return React.createElement("frame", _attributes_2, React.createElement(VStack, {
+		spacing = "None",
+		HorizontalFlex = Enum.UIFlexAlignment.None,
+		Padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.scale, progressBarTheme.header.spacing)),
+	}, React.createElement("frame", {
+		key = "ProgressBarHeader",
+		BackgroundTransparency = 1,
+		Size = UDim2.fromScale(1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, React.createElement(HStack, {
+		valign = "Center",
+		Wraps = false,
+		HorizontalFlex = Enum.UIFlexAlignment.SpaceBetween,
+	}, props.label ~= nil and (React.createElement(Text, {
+		name = "ProgressBarLabel",
+		text = props.label,
+		TextColor3 = labelTypography.color,
+		typography = labelTypography,
+	})), formattedValue ~= nil and (React.createElement(Text, {
+		name = "ProgressBarValue",
+		text = formattedValue,
+		TextColor3 = valueTypography.color,
+		typography = valueTypography,
+	})))), track))
+end)
+return {
+	ProgressBar = ProgressBar,
+}

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

@@ -1,3 +1,4 @@
 export * from './Box';
 export * from './Card';
 export * from './Icon';
+export * from './ProgressBar';

package/out/Components/Surface/init.luau

@@ -10,4 +10,7 @@ end
 for _k, _v in TS.import(script, script, "Icon") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "ProgressBar") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/Components/Typography/Text.d.ts

@@ -9,6 +9,7 @@ interface TextProps extends React.InstanceProps<TextLabel> {
     align?: "Left" | "Right" | "Center";
     TextWrap?: boolean;
     letterSpacing?: number;
+    name?: string;
 }
 export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<TextLabel>>;
 export {};

package/out/Components/Typography/Text.luau

@@ -12,12 +12,6 @@ local Text = React.forwardRef(function(props, ref)
 		_condition = style.letterSpacing
 	end
 	local letterSpacing = _condition
-	-- Roblox text instances have no native letter-spacing property, so a nonzero
-	-- value is faked by splitting the text into one TextLabel per character laid
-	-- out in a UIListLayout row with the spacing as its Padding. This only makes
-	-- sense for short, single-line, plain text: RichText is forced off per-character
-	-- (markup tags can't survive being split apart), and wrapping/truncation are
-	-- moot since each character label auto-sizes to itself and never overflows.
 	if letterSpacing ~= nil and letterSpacing ~= 0 and props.text ~= "" then
 		local characters = {}
 		for index = 0, #props.text - 1 do
@@ -27,7 +21,23 @@ local Text = React.forwardRef(function(props, ref)
 			local _arg0_1 = string.sub(_text, _arg0, _arg1)
 			table.insert(characters, _arg0_1)
 		end
+		local _attributes = {}
+		local _condition_1 = props.name
+		if _condition_1 == nil then
+			_condition_1 = "Text"
+		end
+		_attributes.key = _condition_1
+		_attributes.Size = UDim2.fromScale(0, 0)
+		_attributes.AutomaticSize = Enum.AutomaticSize.XY
+		_attributes.AnchorPoint = props.AnchorPoint
+		_attributes.BackgroundTransparency = 1
+		_attributes.Position = props.Position
+		_attributes.ZIndex = props.ZIndex
+		_attributes.LayoutOrder = props.LayoutOrder
+		_attributes.Visible = props.Visible
+		_attributes.Rotation = props.Rotation
 		local _exp = React.createElement("uilistlayout", {
+			key = "LetterSpacing",
 			FillDirection = Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, letterSpacing),
@@ -37,7 +47,7 @@ local Text = React.forwardRef(function(props, ref)
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue = table.create(#characters)
 		local _callback = function(character, index)
-			local _attributes = {
+			local _attributes_1 = {
 				key = index,
 				LayoutOrder = index,
 				Size = UDim2.fromScale(0, 0),
@@ -46,56 +56,50 @@ local Text = React.forwardRef(function(props, ref)
 				TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor,
 				Text = character,
 			}
-			local _condition_1 = props.LineHeight
-			if _condition_1 == nil then
-				_condition_1 = style.lineHeight
-			end
-			_attributes.LineHeight = _condition_1
-			_attributes.FontFace = Font.fromName(style.font.Name, weight)
-			_attributes.FontSize = style.size
-			_attributes.RichText = false
-			local _condition_2 = props.TextScaled
+			local _condition_2 = props.LineHeight
 			if _condition_2 == nil then
-				_condition_2 = false
+				_condition_2 = style.lineHeight
 			end
-			_attributes.TextScaled = _condition_2
-			_attributes.TextStrokeColor3 = props.TextStrokeColor3
-			_attributes.TextStrokeTransparency = props.TextStrokeTransparency
-			_attributes.TextTransparency = props.TextTransparency
-			return React.createElement("textlabel", _attributes)
+			_attributes_1.LineHeight = _condition_2
+			_attributes_1.FontFace = Font.fromName(style.font.Name, weight)
+			_attributes_1.FontSize = style.size
+			_attributes_1.RichText = false
+			local _condition_3 = props.TextScaled
+			if _condition_3 == nil then
+				_condition_3 = false
+			end
+			_attributes_1.TextScaled = _condition_3
+			_attributes_1.TextStrokeColor3 = props.TextStrokeColor3
+			_attributes_1.TextStrokeTransparency = props.TextStrokeTransparency
+			_attributes_1.TextTransparency = props.TextTransparency
+			return React.createElement("textlabel", _attributes_1)
 		end
 		for _k, _v in characters do
 			_newValue[_k] = _callback(_v, _k - 1, characters)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("frame", {
-			Size = UDim2.fromScale(0, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-			AnchorPoint = props.AnchorPoint,
-			BackgroundTransparency = 1,
-			Position = props.Position,
-			ZIndex = props.ZIndex,
-			LayoutOrder = props.LayoutOrder,
-			Visible = props.Visible,
-			Rotation = props.Rotation,
-		}, _exp, _newValue)
+		return React.createElement("frame", _attributes, _exp, _newValue)
 	end
-	local _attributes = {
-		ref = ref,
-		Size = UDim2.fromScale(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		AnchorPoint = props.AnchorPoint,
-	}
-	local _condition_1 = props.LineHeight
+	local _attributes = {}
+	local _condition_1 = props.name
 	if _condition_1 == nil then
-		_condition_1 = style.lineHeight
+		_condition_1 = "Text"
 	end
-	_attributes.LineHeight = _condition_1
-	local _condition_2 = props.BackgroundTransparency
+	_attributes.key = _condition_1
+	_attributes.ref = ref
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.AnchorPoint = props.AnchorPoint
+	local _condition_2 = props.LineHeight
 	if _condition_2 == nil then
-		_condition_2 = 1
+		_condition_2 = style.lineHeight
+	end
+	_attributes.LineHeight = _condition_2
+	local _condition_3 = props.BackgroundTransparency
+	if _condition_3 == nil then
+		_condition_3 = 1
 	end
-	_attributes.BackgroundTransparency = _condition_2
+	_attributes.BackgroundTransparency = _condition_3
 	_attributes.TextXAlignment = props.align or (props.TextXAlignment or Enum.TextXAlignment.Left)
 	_attributes.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
 	_attributes.Text = props.text
@@ -104,16 +108,16 @@ local Text = React.forwardRef(function(props, ref)
 	_attributes.TextWrapped = textwrapped
 	_attributes.FontFace = Font.fromName(style.font.Name, weight)
 	_attributes.FontSize = style.size
-	local _condition_3 = props.RichText
-	if _condition_3 == nil then
-		_condition_3 = true
-	end
-	_attributes.RichText = _condition_3
-	local _condition_4 = props.TextScaled
+	local _condition_4 = props.RichText
 	if _condition_4 == nil then
-		_condition_4 = false
+		_condition_4 = true
+	end
+	_attributes.RichText = _condition_4
+	local _condition_5 = props.TextScaled
+	if _condition_5 == nil then
+		_condition_5 = false
 	end
-	_attributes.TextScaled = _condition_4
+	_attributes.TextScaled = _condition_5
 	_attributes.ZIndex = props.ZIndex
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.Visible = props.Visible

package/out/Contexts/index.d.ts

@@ -1,5 +1,6 @@
 export * from './draggable.context';
 export * from './droppable.context';
+export * from './modal.context';
 export * from './navigation.context';
 export * from './overlay.context';
 export * from './row.context';

package/out/Contexts/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "droppable.context") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "modal.context") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "navigation.context") or {} do
 	exports[_k] = _v
 end

package/out/Contexts/modal.context.d.ts

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+export interface ModalStackLayer {
+    id: string;
+    closeOnEscape: () => boolean;
+    requestClose: () => void;
+}
+export interface ModalStackContextValue {
+    register: (layer: ModalStackLayer) => void;
+    unregister: (id: string) => void;
+    getLayerIndex: (id: string) => number;
+}
+export declare const ModalStackContext: React.Context<ModalStackContextValue | undefined>;
+export declare function useModalStack(): ModalStackContextValue;
+export declare const ModalCloseContext: React.Context<(() => void) | undefined>;
+export declare function useModalClose(): () => void;

package/out/Contexts/modal.context.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ModalStackContext = React.createContext(nil)
+local function useModalStack()
+	local context = React.useContext(ModalStackContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "ModalProvider is missing.")
+	return context
+end
+local ModalCloseContext = React.createContext(nil)
+local function useModalClose()
+	local context = React.useContext(ModalCloseContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "useModalClose must be used inside a Modal.")
+	return context
+end
+return {
+	useModalStack = useModalStack,
+	useModalClose = useModalClose,
+	ModalStackContext = ModalStackContext,
+	ModalCloseContext = ModalCloseContext,
+}

package/out/Contexts/toast.context.d.ts

@@ -9,6 +9,7 @@ export interface ToastOptions {
     duration?: number;
     dismissible?: boolean;
     children?: React.ReactNode;
+    name?: string;
 }
 export interface ToastRecord extends ToastOptions {
     id: string;

package/out/Helpers/color.helper.luau

@@ -46,6 +46,7 @@ do
 	function ColorHelper:mergeLayers(layers)
 		local merged = {}
 		local backgroundImage
+		local backgroundGradient
 		local typography
 		for _, layer in layers do
 			if layer == nil then
@@ -69,6 +70,32 @@ do
 				end
 				backgroundImage = _object_1
 			end
+			if layer.backgroundGradient ~= nil then
+				local _result
+				if layer.backgroundGradient.colors ~= nil then
+					local _object_1 = {}
+					if backgroundGradient then
+						for _k, _v in backgroundGradient do
+							_object_1[_k] = _v
+						end
+					end
+					_object_1.stops = nil
+					_result = _object_1
+				else
+					_result = backgroundGradient
+				end
+				local inheritedGradient = _result
+				local _object_1 = {}
+				if inheritedGradient then
+					for _k, _v in inheritedGradient do
+						_object_1[_k] = _v
+					end
+				end
+				for _k, _v in layer.backgroundGradient do
+					_object_1[_k] = _v
+				end
+				backgroundGradient = _object_1
+			end
 			if layer.typography ~= nil then
 				local _object_1 = {}
 				if typography then
@@ -83,6 +110,7 @@ do
 			end
 		end
 		merged.backgroundImage = backgroundImage
+		merged.backgroundGradient = backgroundGradient
 		merged.typography = typography
 		return merged
 	end

package/out/Helpers/css.helper.d.ts

@@ -1,4 +1,4 @@
-import { CssBoxShadow, CssShadow, CssCalcSize, CssQuad, CssDual, CssSliceInset } from "../Interfaces/css.types";
+import { CssBoxShadow, CssShadow, CssCalcSize, CssQuad, CssDual, CssSliceInset, CssBackgroundGradient } from "../Interfaces/css.types";
 import { CssBackgroundImage } from "../Theme";
 interface ParsedShadow {
     offset: UDim2;
@@ -35,5 +35,8 @@ export declare class CssHelper {
         SliceScale?: number;
         TileSize?: UDim2;
     };
+    static resolveBackgroundGradient(value: Partial<CssBackgroundGradient> | undefined): React.InstanceProps<UIGradient> | undefined;
+    private static buildColorSequence;
+    private static buildTransparencySequence;
 }
 export {};

package/out/Helpers/css.helper.luau

@@ -86,12 +86,6 @@ do
 		if type(_value) == "number" then
 			return UDim.new(0, value)
 		end
-		-- The one CSS calc() shape supported: "<percent>% - <px>px" /
-		-- "<percent>% + <px>px" (e.g. "100% - 50px") maps directly onto
-		-- UDim(scale, offset) — split on the literal " - "/" + " separator
-		-- and parse each term with this same function. Anything without
-		-- either separator falls through to the single-token parsing below,
-		-- unchanged.
 		local minusParts = string.split(value, " - ")
 		if #minusParts == 2 then
 			local scale = self:parseCssSize(minusParts[1]).Scale
@@ -341,6 +335,82 @@ do
 		_object.TileSize = if value.tileSize ~= nil then self:parseCssDual(value.tileSize) else nil
 		return _object
 	end
+	function CssHelper:resolveBackgroundGradient(value)
+		local _colors = value
+		if _colors ~= nil then
+			_colors = _colors.colors
+		end
+		local colors = _colors
+		if value == nil or colors == nil then
+			return nil
+		end
+		if not (typeof(colors) == "ColorSequence") and #colors == 0 then
+			return nil
+		end
+		local color = if typeof(colors) == "ColorSequence" then colors else self:buildColorSequence(colors, value.stops)
+		return {
+			Color = color,
+			Transparency = self:buildTransparencySequence(value.transparency),
+			Rotation = value.rotation,
+			Offset = value.offset,
+		}
+	end
+	function CssHelper:buildColorSequence(colors, stops)
+		if #colors == 1 then
+			return ColorSequence.new(colors[1])
+		end
+		local lastIndex = #colors - 1
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#colors)
+		local _callback = function(color, index)
+			local _result = stops
+			if _result ~= nil then
+				_result = _result[index + 1]
+			end
+			local time = if _result ~= nil then math.clamp(stops[index + 1], 0, 1) else index / lastIndex
+			if index == 0 then
+				time = 0
+			elseif index == lastIndex then
+				time = 1
+			end
+			return {
+				time = time,
+				color = color,
+				index = index,
+			}
+		end
+		for _k, _v in colors do
+			_newValue[_k] = _callback(_v, _k - 1, colors)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		local entries = _newValue
+		table.sort(entries, function(a, b)
+			if a.time ~= b.time then
+				return a.time < b.time
+			end
+			return a.index < b.index
+		end)
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#entries)
+		local _callback_1 = function(entry)
+			return ColorSequenceKeypoint.new(entry.time, entry.color)
+		end
+		for _k, _v in entries do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, entries)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return ColorSequence.new(_newValue_1)
+	end
+	function CssHelper:buildTransparencySequence(value)
+		if value == nil then
+			return nil
+		end
+		local _value = value
+		if typeof(_value) == "NumberSequence" then
+			return value
+		end
+		return NumberSequence.new(math.clamp(value, 0, 1))
+	end
 end
 return {
 	CssHelper = CssHelper,

package/out/Helpers/gui.helper.luau

@@ -84,7 +84,6 @@ do
 						rootIndex = index,
 					}
 					table.insert(surfaces, _arg0)
-					-- Don't recurse into another render surface.
 					continue
 				end
 				visit(child)
@@ -117,11 +116,9 @@ do
 			if a.object.ZIndex ~= b.object.ZIndex then
 				return a.object.ZIndex < b.object.ZIndex
 			end
-			-- Preserve sibling order.
 			return a.siblingIndex < b.siblingIndex
 		end)
 		for _, child in children do
-			-- Parent renders before its children.
 			local _result = result
 			local _object = child.object
 			table.insert(_result, _object)

package/out/Helpers/size.helper.luau

@@ -63,8 +63,6 @@ do
 		if props.AutomaticSize ~= nil then
 			return props.AutomaticSize
 		end
-		-- "Auto" behaves like an unset dimension for the purposes of deciding
-		-- which axes get AutomaticSize, but still forces that axis to 0 in GetSize.
 		local width = if props.width == "Auto" then nil else props.width
 		local height = if props.height == "Auto" then nil else props.height
 		local _condition = props.Size ~= nil

package/out/Helpers/spacing.helper.luau

@@ -39,9 +39,6 @@ do
 		end
 		local isNone = props.spacing == "None"
 		local key = if props.spacing ~= nil and props.spacing ~= "None" then props.spacing else (defaultSpacing or theme.default.spacing)
-		-- tier 3: a scale-indexed map picks the quad for the active key
-		-- (falling through to tiers 1/2 if that key isn't defined in the
-		-- map); a plain quad applies regardless of key.
 		local _result
 		if isNone or componentPadding == nil then
 			_result = nil