@rbxts/react-clean-ui 1.2.2 → 1.2.5

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.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

package/out/Contexts/modal.context.luau

@@ -8,9 +8,6 @@ local function useModalStack()
 	assert(_arg0, "ModalProvider is missing.")
 	return context
 end
--- Per-instance, provided by each <Modal> around its own children so a
--- header close button or footer button can close the nearest modal
--- without the consumer threading their own handler down manually.
 local ModalCloseContext = React.createContext(nil)
 local function useModalClose()
 	local context = React.useContext(ModalCloseContext)

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

package/out/Helpers/typography.helper.luau

@@ -37,7 +37,6 @@ do
 	function TypographyHelper:getClosestTypography(typography, scale)
 		local _scale = scale
 		local scaleIndex = (table.find(ScaleSizes, _scale) or 0) - 1
-		-- Prefer the exact scale, then progressively smaller scales.
 		do
 			local index = scaleIndex
 			local _shouldIncrement = false
@@ -56,7 +55,6 @@ do
 				end
 			end
 		end
-		-- If no smaller scale exists, use the nearest larger scale.
 		do
 			local index = scaleIndex + 1
 			local _shouldIncrement = false

package/out/Interfaces/css.types.d.ts

@@ -28,3 +28,10 @@ export type CssBoxShadow = {
 export type CssPadding = CssQuad;
 export type ScaledCssPadding = CssPadding | ScaleSizeValue<CssPadding>;
 export type ResponsiveCssSize = CssSize | CssBreakpointSize;
+export type CssBackgroundGradient = {
+    colors: Color3[] | ColorSequence;
+    stops?: number[];
+    rotation?: number;
+    offset?: Vector2;
+    transparency?: number | NumberSequence;
+};

package/out/Interfaces/css.types.luau

@@ -1,21 +1 @@
 -- Compiled with roblox-ts v3.0.0
--- The one CSS calc() shape supported on top of CssSize: a percent term
--- plus/minus a pixel term (e.g. "100% - 50px"), which maps directly onto
--- UDim(scale, offset) — no general calc() parser needed for anything beyond
--- this two-term form. Deliberately kept as its own type rather than folded
--- directly into CssSize: CssSize is composed multiple times over in CssQuad/
--- CssDual (a 4-term CssQuad is `${CssSize} ${CssSize} ${CssSize} ${CssSize}`),
--- so widening CssSize itself multiplies out through every one of those
--- combinations — doing so was observed to blow past TypeScript's template-
--- literal complexity limit ("union type that is too complex to represent")
--- at unrelated call sites that spread a large props object containing
--- several CssQuad-shaped fields (e.g. Button.tsx's `<BoxShadow {...props} />`).
--- Use CssCalcSize only where a calc() term is actually needed (currently
--- just CssPosition.width) rather than everywhere CssSize appears.
--- absolute pixel corner coordinates for Rect.new(minX, minY, maxX, maxY)-style slicing,
--- e.g. Roblox's SliceCenter — not a CSS border-image-slice edge-inset shorthand, since
--- Roblox has no intrinsic-image-size equivalent to derive corners from an inset alone
--- A CssPadding quad, or a scale-key-indexed map of quads (e.g. a component's
--- theme.components.X.padding tier, which can pick a different quad shape per
--- spacing scale key the same way theme.components.X.spacing does for the
--- numeric tier).

package/out/Providers/registry.provider.luau

@@ -2,8 +2,6 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local HttpService = TS.import(script, TS.getModule(script, "@rbxts", "services")).HttpService
--- This registry is used to keep a global map of GuiObjects => React components
--- For example Droppable zones use this to register themselves
 local DroppableRegistryKey = {
 	name = "Droppable",
 }

package/out/Theme/theme.style.d.ts

@@ -1,5 +1,5 @@
 import { Binding } from "@rbxts/react";
-import { ScaleSize, CssShadow, ButtonFlag, CssDual, CssSliceInset, CssSize, CssCalcSize } from "../Interfaces/";
+import { ScaleSize, CssShadow, ButtonFlag, CssDual, CssSliceInset, CssSize, CssCalcSize, CssBackgroundGradient } from "../Interfaces/";
 export interface TypographyStyle {
     font: Enum.Font;
     size: Enum.FontSize;
@@ -18,6 +18,7 @@ export interface IntentScheme {
     boxShadow?: CssShadow;
     typography?: Partial<TypographyStyle>;
     backgroundImage?: Partial<CssBackgroundImage>;
+    backgroundGradient?: Partial<CssBackgroundGradient>;
 }
 export interface IntentColors extends Partial<Record<ButtonFlag, IntentScheme>> {
     default: IntentScheme;
@@ -46,3 +47,9 @@ export interface CssPosition {
     zIndex?: number;
     width?: CssCalcSize;
 }
+export interface CssCornerRadius {
+    topLeft?: CssSize;
+    topRight?: CssSize;
+    bottomLeft?: CssSize;
+    bottomRight?: CssSize;
+}

package/out/Theme/theme.template.d.ts

@@ -1,5 +1,5 @@
-import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow } from "../Interfaces/";
-import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition } from "./theme.style";
+import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow, CssBackgroundGradient } from "../Interfaces/";
+import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition, CssCornerRadius } from "./theme.style";
 export interface ThemeTemplate {
     colors: {
         intents: Record<Intent, IntentColors>;
@@ -52,6 +52,7 @@ export interface ThemeTemplate {
             padding?: ScaledCssPadding;
             boxShadow?: CssShadow;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
         button: {
@@ -71,6 +72,7 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             placeholder?: Partial<TypographyStyle> | ScaledTypographyStyle;
             iconColor?: Color3;
         };
@@ -79,6 +81,7 @@ export interface ThemeTemplate {
             borderThickness: number;
             cornerRadius: CssSize;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             dropDownBackgroundColor: Color3;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -105,6 +108,7 @@ export interface ThemeTemplate {
             spacing?: ScaleSizeValue<number>;
             padding?: ScaledCssPadding;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
         };
         switch: {
             width: CssSize;
@@ -135,6 +139,7 @@ export interface ThemeTemplate {
             borderColor: Color3;
             backgroundColor: Color3;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             borderThickness: number;
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
@@ -148,6 +153,7 @@ export interface ThemeTemplate {
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 backgroundImage?: CssBackgroundImage;
+                backgroundGradient?: CssBackgroundGradient;
             };
             button: {
                 borderThickness: number;
@@ -224,6 +230,7 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             header: {
                 borderThickness?: number;
+                cornerRadius?: CssCornerRadius;
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -231,6 +238,7 @@ export interface ThemeTemplate {
             };
             footer: {
                 borderThickness?: number;
+                cornerRadius?: CssCornerRadius;
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -267,6 +275,40 @@ export interface ThemeTemplate {
                 aspectRatio?: number;
             };
         };
+        progressBar: {
+            height: ScaleSizeValue<CssSize>;
+            animation: {
+                duration: number;
+            };
+            header: {
+                spacing?: ScaleSizeValue<number>;
+                label: {
+                    typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                };
+                value: {
+                    typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                };
+            };
+            track: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                backgroundImage?: CssBackgroundImage;
+                backgroundGradient?: CssBackgroundGradient;
+            };
+            fill: {
+                cornerRadius: CssSize;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+                stripe?: {
+                    enabled: boolean;
+                    image?: Omit<Partial<CssBackgroundImage>, "size">;
+                    duration?: number;
+                    direction?: number;
+                };
+            };
+        };
         toast: {
             width: CssSize;
             fadeDuration: number;