@rbxts/react-clean-ui 1.2.2 → 1.2.5

package/out/Components/Layout/Group.luau

@@ -1,27 +1,32 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
--- import { HttpService } from "@rbxts/services";
 local RegistryContext = TS.import(script, script.Parent.Parent.Parent, "Providers").RegistryContext
 local GroupContext = React.createContext(nil)
+local nextFallbackElementId = 0
 local function GroupElement(props)
 	local registry = React.useContext(RegistryContext)
 	local context = React.useContext(GroupContext)
-	local _result = registry
-	if _result ~= nil then
-		_result = _result.GetNextId()
-	end
-	local _condition = _result
-	if _condition == nil then
-		_condition = ""
+	local idRef = React.useRef()
+	if idRef.current == nil then
+		nextFallbackElementId += 1
+		local _result = registry
+		if _result ~= nil then
+			_result = _result.GetNextId()
+		end
+		local _condition = _result
+		if _condition == nil then
+			_condition = `group-element-{nextFallbackElementId}`
+		end
+		idRef.current = _condition
 	end
-	local id = React.useRef(_condition).current
+	local id = idRef.current
 	local enabled = props.enabled == true and context ~= nil
 	local _exp = function()
 		if not enabled then
-			local _result_1 = context
-			if _result_1 ~= nil then
-				_result_1.removeElement(id)
+			local _result = context
+			if _result ~= nil then
+				_result.removeElement(id)
 			end
 			return nil
 		end
@@ -29,54 +34,54 @@ local function GroupElement(props)
 			context.removeElement(id)
 		end
 	end
-	local _result_1 = context
-	if _result_1 ~= nil then
-		_result_1 = _result_1.removeElement
+	local _result = context
+	if _result ~= nil then
+		_result = _result.removeElement
 	end
-	React.useEffect(_exp, { enabled, _result_1 })
+	React.useEffect(_exp, { enabled, _result })
 	if not enabled then
 		return props.children
 	end
+	local _result_1 = props.padding
+	if _result_1 ~= nil then
+		_result_1 = _result_1.left
+	end
+	local _condition = _result_1
+	if _condition == nil then
+		_condition = 0
+	end
 	local _result_2 = props.padding
 	if _result_2 ~= nil then
-		_result_2 = _result_2.left
+		_result_2 = _result_2.right
 	end
 	local _condition_1 = _result_2
 	if _condition_1 == nil then
 		_condition_1 = 0
 	end
+	local horizontalPadding = _condition + _condition_1
 	local _result_3 = props.padding
 	if _result_3 ~= nil then
-		_result_3 = _result_3.right
+		_result_3 = _result_3.top
 	end
 	local _condition_2 = _result_3
 	if _condition_2 == nil then
 		_condition_2 = 0
 	end
-	local horizontalPadding = _condition_1 + _condition_2
 	local _result_4 = props.padding
 	if _result_4 ~= nil then
-		_result_4 = _result_4.top
+		_result_4 = _result_4.bottom
 	end
 	local _condition_3 = _result_4
 	if _condition_3 == nil then
 		_condition_3 = 0
 	end
-	local _result_5 = props.padding
-	if _result_5 ~= nil then
-		_result_5 = _result_5.bottom
-	end
-	local _condition_4 = _result_5
-	if _condition_4 == nil then
-		_condition_4 = 0
-	end
-	local verticalPadding = _condition_3 + _condition_4
+	local verticalPadding = _condition_2 + _condition_3
 	local _attributes = {}
-	local _condition_5 = props.name
-	if _condition_5 == nil then
-		_condition_5 = "GroupElement"
+	local _condition_4 = props.name
+	if _condition_4 == nil then
+		_condition_4 = "GroupElement"
 	end
-	_attributes.key = _condition_5
+	_attributes.key = _condition_4
 	_attributes.BackgroundTransparency = 1
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.Change = {

package/out/Components/Layout/Pagination.luau

@@ -51,8 +51,6 @@ local function computePaginationItems(page, totalPages, siblingCount)
 	local showLeftEllipsis = leftSiblingIndex > 2
 	local showRightEllipsis = rightSiblingIndex < pageCount - 1
 	if not showLeftEllipsis and showRightEllipsis then
-		-- Near the start: no left ellipsis needed, so extend the leading run of
-		-- numbers to keep the total item count constant.
 		local leftItemCount = siblings * 2 + 3
 		local items = {}
 		do
@@ -76,8 +74,6 @@ local function computePaginationItems(page, totalPages, siblingCount)
 		return items
 	end
 	if showLeftEllipsis and not showRightEllipsis then
-		-- Near the end: no right ellipsis needed, so extend the trailing run of
-		-- numbers to keep the total item count constant.
 		local rightItemCount = siblings * 2 + 3
 		local items = { 1, "ellipsis" }
 		do
@@ -98,7 +94,6 @@ local function computePaginationItems(page, totalPages, siblingCount)
 		end
 		return items
 	end
-	-- Both ellipses shown (the normal middle case) — unchanged from before.
 	local items = { 1, "ellipsis" }
 	do
 		local value = leftSiblingIndex

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

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { PaddingProps, ScalableElementProps } from "../../Interfaces";
+import { CssBackgroundGradient, PaddingProps, ScalableElementProps } from "../../Interfaces";
 import { CssBackgroundImage } from "../../Theme";
 interface TabTitleProps extends PaddingProps {
     value: string;
@@ -17,6 +17,7 @@ interface TabsListProps extends ScalableElementProps {
 declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<ImageLabel>>;
 interface TabsBodyProps extends ScalableElementProps {
     backgroundImage?: CssBackgroundImage;
+    backgroundGradient?: CssBackgroundGradient;
     children?: React.ReactNode;
 }
 declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.RefAttributes<ImageLabel>>;

package/out/Components/Layout/Tabs.luau

@@ -9,6 +9,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local BoxShadow = _Decorator.BoxShadow
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
@@ -18,10 +19,6 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
 local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
--- Selection only — Tabs.List/Tabs.Body/Tabs.Title/Tabs.Content each render
--- themselves for real (see Card.tsx's CardHeader/CardFooter for the same
--- "Root provides Context, subparts consume it independently" pattern), so
--- there's nothing here to scan or harvest from children.
 local TabsContext = React.createContext({
 	selected = nil,
 	setSelected = function() end,
@@ -57,23 +54,20 @@ local function TabButtonContent(props)
 		typography = TypographyHelper:getTypography(theme, nil, intent.typography),
 	}))
 end
--- The real per-tab button — derives its own default/hover/focus color scheme
--- from the theme (same per-instance derivation Card.Header/Card.Footer use,
--- not hoisted to Root) and drives selection itself via TabsContext.
 local function TabTitle(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _binding = React.useContext(TabsContext)
 	local selected = _binding.selected
 	local setSelected = _binding.setSelected
 	local isSelected = selected == props.value
-	-- The first-mounted Tabs.Title claims the selection if none is set yet,
-	-- preserving "first tab selected by default" now that nothing scans the
-	-- tab list up front. Known limitation: if the currently-selected tab's
-	-- Tabs.Title unmounts, selection isn't automatically reassigned.
 	React.useEffect(function()
-		if selected == nil then
-			setSelected(props.value)
-		end
+		setSelected(function(current)
+			local _condition = current
+			if _condition == nil then
+				_condition = props.value
+			end
+			return _condition
+		end)
 	end, {})
 	local buttonDefault = ColorHelper:getIntentColors(theme, "primary", "default", theme.components.tabs.button.intents)
 	local buttonHover = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.tabs.button.intents)
@@ -130,14 +124,6 @@ local function TabTitle(props)
 		},
 	}, React.createElement(TabButtonContent, _attributes))
 end
--- Always mounted — visibility is toggled rather than the panel being
--- unmounted/remounted, so per-tab local state (e.g. a Scroller's scroll
--- position) survives switching tabs. Roblox excludes a GuiObject with
--- Visible=false from its ancestors' AutomaticSize/UIListLayout
--- content-size calculations, so the hidden panels don't inflate Tabs.Body's
--- own AutomaticSize; since only one panel is ever visible at a time, the
--- default (unset) Position/AnchorPoint every panel shares never causes a
--- visible overlap either.
 local function TabContent(props)
 	local _binding = React.useContext(TabsContext)
 	local selected = _binding.selected
@@ -163,6 +149,8 @@ local TabsList = React.forwardRef(function(props, ref)
 	_attributes.backgroundImage = theme.components.tabs.list.backgroundImage
 	return React.createElement(Container, _attributes, React.createElement(Corners, {
 		radius = theme.components.tabs.list.cornerRadius,
+	}), React.createElement(Gradient, {
+		value = theme.components.tabs.list.backgroundGradient,
 	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
 	}), React.createElement(HStack, nil, props.children))
@@ -183,19 +171,10 @@ local TabsBody = React.forwardRef(function(props, ref)
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
 	}), React.createElement(Corners, {
 		radius = theme.components.tabs.cornerRadius,
+	}), React.createElement(Gradient, {
+		value = props.backgroundGradient or theme.components.tabs.backgroundGradient,
 	}), props.children)
 end)
--- Root doesn't render a real Roblox Instance of its own (just a Context
--- Provider around a VStack, itself just a Fragment) — see Group.tsx for the
--- same shape. It's still wrapped in React.forwardRef, not a plain function,
--- because roblox-ts compiles a bare arrow function to an actual Lua
--- `function` value, and Lua functions can't have table-style properties
--- (Tabs.List = ...) assigned onto them — forwardRef's return value compiles
--- to a table instead. The ref itself is genuinely unused: there's no
--- sensible Instance for it to point at, so RefAttributes<Frame> below is a
--- type-level placeholder to keep this consistent with every other compound
--- component's shape, not a real forwarded ref — Tabs does not support a
--- `ref` prop in practice.
 local Tabs = React.forwardRef(function(props, _ref)
 	local selected, setSelected = React.useState(props.defaultValue)
 	local contextValue = React.useMemo(function()

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

@@ -5,6 +5,7 @@ export * from './Draggable';
 export * from './Droppable';
 export * from './Fieldset';
 export * from './FlexItem';
+export * from './Grid';
 export * from './Group';
 export * from './HStack';
 export * from './Pagination';

package/out/Components/Layout/init.luau

@@ -22,6 +22,9 @@ end
 for _k, _v in TS.import(script, script, "FlexItem") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Grid") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Group") or {} do
 	exports[_k] = _v
 end

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

@@ -1,10 +1,11 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+import { BackgroundElementProps, CssBackgroundGradient, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
 import { CssBackgroundImage } from "../../Theme";
 export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, PositionElementProps, React.InstanceProps<ImageLabel> {
     'border-thickness'?: number;
     'border-color'?: Color3;
     'background-image'?: CssBackgroundImage;
+    'background-gradient'?: CssBackgroundGradient;
     name?: string;
 }
 export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Surface/Box.luau

@@ -6,6 +6,7 @@ local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Padding = _Decorator.Padding
 local Corners = _Decorator.Corners
 local BoxShadow = _Decorator.BoxShadow
+local Gradient = _Decorator.Gradient
 local Container = TS.import(script, script.Parent.Parent, "Layout").Container
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local SizeHelper = _Helpers.SizeHelper
@@ -54,6 +55,8 @@ local Box = React.forwardRef(function(props, ref)
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.box.spacing, theme.components.box.padding),
 	}), React.createElement(Corners, {
 		radius = theme.components.box.cornerRadius,
+	}), React.createElement(Gradient, {
+		value = props["background-gradient"] or theme.components.box.backgroundGradient,
 	}), props.children)
 end)
 return {

package/out/Components/Surface/Card.luau

@@ -14,13 +14,6 @@ local SpacingHelper = _Helpers.SpacingHelper
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local Padding = TS.import(script, script.Parent.Parent, "Decorator").Padding
 local CardContext = React.createContext({})
--- Resolves a theme-driven CssPosition into raw Position/AnchorPoint offsets.
--- This is a one-off resolver rather than a SizeHelper addition because
--- CssPosition's `center` is axis-aware (`"x"` / `"y"`) so it can express
--- "center horizontally, anchor to the top with an offset" — something
--- SizeHelper.GetPosition/GetAnchor can't do since they apply `center`
--- identically to both axes, and that symmetric behavior is relied on
--- elsewhere in the codebase so isn't something to widen here.
 local function resolveCssPositionOffset(position)
 	local centerX = position.center == true or position.center == "x"
 	local centerY = position.center == true or position.center == "y"
@@ -28,19 +21,6 @@ local function resolveCssPositionOffset(position)
 	local anchorY = if centerY then 0.5 else (if position.top == nil and position.bottom ~= nil then 1 else 0)
 	local posX = if centerX then UDim.new(0.5, 0) elseif position.left ~= nil then SizeHelper:toUDim(position.left) elseif position.right ~= nil then UDim.new(1 - SizeHelper:toUDim(position.right).Scale, -SizeHelper:toUDim(position.right).Offset) else UDim.new(0, 0)
 	local posY = if centerY then UDim.new(0.5, 0) elseif position.top ~= nil then SizeHelper:toUDim(position.top) elseif position.bottom ~= nil then UDim.new(1 - SizeHelper:toUDim(position.bottom).Scale, -SizeHelper:toUDim(position.bottom).Offset) else UDim.new(0, 0)
-	-- A theme-driven fixed/relative width (only meaningful in overlay mode,
-	-- see CssPosition.width) forces a fixed-width/auto-height Size, taking
-	-- over the caller's default Size={fromScale(0,0)}/AutomaticSize={XY} —
-	-- otherwise Size/AutomaticSize are left undefined so the caller's own
-	-- default applies unchanged. Parsed via CssHelper.parseCssSize (not
-	-- SizeHelper.toUDim, used for top/left/right/bottom above) since it's
-	-- the one that understands the "<percent>% - <px>px" calc() shape a
-	-- width value may use (e.g. "100% - 50px").
-	--
-	-- When `width` isn't explicit but both `left` and `right` are set, imply
-	-- a width from them the same way CSS does for an absolutely-positioned
-	-- element: width = 100% - left - right. Explicit `width` always wins if
-	-- somehow both are set.
 	local impliedWidth = if position.width == nil and position.left ~= nil and position.right ~= nil then (function()
 		local leftUDim = SizeHelper:toUDim(position.left)
 		local rightUDim = SizeHelper:toUDim(position.right)
@@ -63,18 +43,6 @@ local function resolveCssPositionOffset(position)
 	end
 	return _object
 end
--- Header/footer overlay mode escapes the card's VStack (a UIListLayout
--- forcibly repositions every sibling it lays out, so there's no way to keep
--- a custom Position/AnchorPoint on a child that stays inside it) — Card
--- pulls an overlay-requesting Header/Footer out of the flow and renders it
--- as an absolutely-positioned sibling of the Box instead. Overlay mode is
--- requested via the instance `overlay` prop or `theme.components.card.header
--- /footer.position.position === "absolute"`; when the instance sets any of
--- its own Position/AnchorPoint/top/left/right/bottom/center fields, those
--- win wholesale over the theme's CssPosition (mixing partial fields across
--- the two differently-shaped position vocabularies isn't attempted), exactly
--- mirroring the precedence the previous PositionElementProps-based
--- implementation gave instance props.
 local function resolveOverlayPosition(props, themePosition)
 	local _condition = props.overlay
 	if _condition == nil then
@@ -161,6 +129,28 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.header.intents)
 	local padding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.card.header.spacing, theme.components.card.header.padding, "md")
 	local corners = CssHelper:parseCssSize(theme.components.card.cornerRadius)
+	local headerCorners = theme.components.card.header.cornerRadius
+	local noCorner = UDim.new(0, 0)
+	local _result = headerCorners
+	if _result ~= nil then
+		_result = _result.topLeft
+	end
+	local topLeftRadius = if _result ~= nil then CssHelper:parseCssSize(headerCorners.topLeft) else corners
+	local _result_1 = headerCorners
+	if _result_1 ~= nil then
+		_result_1 = _result_1.topRight
+	end
+	local topRightRadius = if _result_1 ~= nil then CssHelper:parseCssSize(headerCorners.topRight) else corners
+	local _result_2 = headerCorners
+	if _result_2 ~= nil then
+		_result_2 = _result_2.bottomLeft
+	end
+	local bottomLeftRadius = if _result_2 ~= nil then CssHelper:parseCssSize(headerCorners.bottomLeft) else noCorner
+	local _result_3 = headerCorners
+	if _result_3 ~= nil then
+		_result_3 = _result_3.bottomRight
+	end
+	local bottomRightRadius = if _result_3 ~= nil then CssHelper:parseCssSize(headerCorners.bottomRight) else noCorner
 	local _binding = resolveOverlayPosition(props, theme.components.card.header.position)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
@@ -180,6 +170,7 @@ local CardHeader = React.forwardRef(function(props, ref)
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
 	_attributes.backgroundImage = intent.backgroundImage
+	_attributes.backgroundGradient = intent.backgroundGradient
 	_attributes.Change = if overlay and card.reportOverlayHeaderRect ~= nil then {
 		AbsolutePosition = function(instance)
 			return card.reportOverlayHeaderRect(instance.AbsolutePosition, instance.AbsoluteSize)
@@ -203,22 +194,14 @@ local CardHeader = React.forwardRef(function(props, ref)
 	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	return React.createElement(Container, _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement("uicorner", {
 		key = "Corners",
-		TopLeftRadius = corners,
-		TopRightRadius = corners,
-		BottomLeftRadius = UDim.new(0, 0),
-		BottomRightRadius = UDim.new(0, 0),
+		TopLeftRadius = topLeftRadius,
+		TopRightRadius = topRightRadius,
+		BottomLeftRadius = bottomLeftRadius,
+		BottomRightRadius = bottomRightRadius,
 	}), props.children)
 end)
 local CardBody = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
-	-- Unified 4-tier padding resolution (see SpacingHelper.GetResolvedPadding):
-	-- `card.body.spacing` (tier 2) overrides the global spacing map per
-	-- scale key, falling back to it for any key it doesn't define, and
-	-- `card.body.padding` (tier 3) overrides the scale-based tiers
-	-- entirely at the active key. CardBody wraps its children in a
-	-- Container, not a Box, so it doesn't get Box's automatic
-	-- `box.padding` application for free — this resolves independently
-	-- against `theme.components.card.body`'s own tiers.
 	local paddingSourceProps = props
 	local _attributes = {
 		name = "CardBody",
@@ -247,6 +230,28 @@ local CardFooter = React.forwardRef(function(props, ref)
 	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.footer.intents)
 	local padding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.card.footer.spacing, theme.components.card.footer.padding, "md")
 	local corners = CssHelper:parseCssSize(theme.components.card.cornerRadius)
+	local footerCorners = theme.components.card.footer.cornerRadius
+	local noCorner = UDim.new(0, 0)
+	local _result = footerCorners
+	if _result ~= nil then
+		_result = _result.topLeft
+	end
+	local topLeftRadius = if _result ~= nil then CssHelper:parseCssSize(footerCorners.topLeft) else noCorner
+	local _result_1 = footerCorners
+	if _result_1 ~= nil then
+		_result_1 = _result_1.topRight
+	end
+	local topRightRadius = if _result_1 ~= nil then CssHelper:parseCssSize(footerCorners.topRight) else noCorner
+	local _result_2 = footerCorners
+	if _result_2 ~= nil then
+		_result_2 = _result_2.bottomLeft
+	end
+	local bottomLeftRadius = if _result_2 ~= nil then CssHelper:parseCssSize(footerCorners.bottomLeft) else corners
+	local _result_3 = footerCorners
+	if _result_3 ~= nil then
+		_result_3 = _result_3.bottomRight
+	end
+	local bottomRightRadius = if _result_3 ~= nil then CssHelper:parseCssSize(footerCorners.bottomRight) else corners
 	local _binding = resolveOverlayPosition(props, theme.components.card.footer.position)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
@@ -266,6 +271,7 @@ local CardFooter = React.forwardRef(function(props, ref)
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
 	_attributes.backgroundImage = intent.backgroundImage
+	_attributes.backgroundGradient = intent.backgroundGradient
 	_attributes.Change = if overlay and card.reportOverlayFooterRect ~= nil then {
 		AbsolutePosition = function(instance)
 			return card.reportOverlayFooterRect(instance.AbsolutePosition, instance.AbsoluteSize)
@@ -289,26 +295,14 @@ local CardFooter = React.forwardRef(function(props, ref)
 	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	return React.createElement(Container, _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement("uicorner", {
 		key = "Corners",
-		TopLeftRadius = UDim.new(0, 0),
-		TopRightRadius = UDim.new(0, 0),
-		BottomLeftRadius = corners,
-		BottomRightRadius = corners,
+		TopLeftRadius = topLeftRadius,
+		TopRightRadius = topRightRadius,
+		BottomLeftRadius = bottomLeftRadius,
+		BottomRightRadius = bottomRightRadius,
 	}), props.children)
 end)
 local Card = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
-	-- Overlay clearance: an overlay header (see resolveOverlayPosition)
-	-- is pulled out of the VStack entirely, so nothing reserves space
-	-- for it — its rendered box typically extends downward past its own
-	-- anchor point and overlaps into the top of the Box. These two
-	-- pieces of state capture the header's reported rect (via
-	-- CardContext.reportOverlayHeaderRect, set on CardHeader below) and
-	-- the overlay wrapper frame's own AbsolutePosition, so the amount of
-	-- that overlap can be measured and reserved as extra top padding on
-	-- the Box (see headerClearance/boxProps below). Both are undefined
-	-- until their first Change event fires after mount, which is the
-	-- same measure-then-settle characteristic Accordion.tsx accepts for
-	-- its own AbsoluteSize-driven measurements.
 	local headerRect, setHeaderRect = React.useState()
 	local footerRect, setFooterRect = React.useState()
 	local wrapperAbsoluteY, setWrapperAbsoluteY = React.useState()
@@ -334,10 +328,6 @@ local Card = React.forwardRef(function(props, ref)
 		}
 	end, { props.intent, reportOverlayHeaderRect, reportOverlayFooterRect })
 	local intent = ColorHelper:getIntentColors(theme, props.intent or "primary", "default", theme.components.card.header.intents)
-	-- Pull out a Header/Footer that wants overlay placement so it can be
-	-- rendered outside the VStack below (see resolveOverlayPosition above
-	-- for why it can't stay inside the VStack and still be positioned).
-	-- Everything else renders in place, in its original order.
 	local _binding = React.useMemo(function()
 		local flow = {}
 		local header
@@ -392,21 +382,9 @@ local Card = React.forwardRef(function(props, ref)
 	local overlayHeader = _binding.overlayHeader
 	local overlayFooter = _binding.overlayFooter
 	local hasOverlay = overlayHeader ~= nil or overlayFooter ~= nil
-	-- How far the overlay header's bottom edge extends past the
-	-- wrapper's (i.e. the Box's) top edge — 0 when there's no overlap
-	-- (e.g. a small/no theme offset) or nothing has been measured yet.
 	local headerClearance = if overlayHeader ~= nil and headerRect ~= nil and wrapperAbsoluteY ~= nil then math.max(0, (headerRect.position.Y + headerRect.size.Y) - wrapperAbsoluteY) else 0
-	-- Same idea, mirrored for the footer: the wrapper's bottom edge
-	-- (its top plus its own height) minus the footer's reported top
-	-- edge (AbsolutePosition is always the top-left corner regardless
-	-- of AnchorPoint) is how far the footer's top edge sits above the
-	-- Box's bottom edge, i.e. how much it overlaps upward into it.
 	local wrapperBottomY = if wrapperAbsoluteY ~= nil and wrapperAbsoluteSize ~= nil then wrapperAbsoluteY + wrapperAbsoluteSize.Y else nil
 	local footerClearance = if overlayFooter ~= nil and footerRect ~= nil and wrapperBottomY ~= nil then math.max(0, wrapperBottomY - footerRect.position.Y) else 0
-	-- The Box below now sits inside an extra positioning frame (see
-	-- boxWithOverlay), so its own Position/AnchorPoint/ZIndex/LayoutOrder
-	-- are cleared here to avoid double-applying them — the wrapper frame
-	-- owns those instead.
 	local _result
 	if hasOverlay then
 		local _object = table.clone(props)
@@ -424,18 +402,6 @@ local Card = React.forwardRef(function(props, ref)
 		_result = props
 	end
 	local boxProps = _result
-	-- When there's no footer at all, footerClearance is always 0 (there's
-	-- nothing to measure an overlap against), so fall back to the Box's
-	-- own explicit theme.components.box.padding bottom inset — if the
-	-- theme sets one — as a floor instead. This keeps content clear of a
-	-- themed Box's decorative border image (e.g. wooden's wood-frame art,
-	-- which needs a real bottom inset) even when there's no footer to
-	-- reserve that space via measured overlap. Themes that don't set an
-	-- explicit box padding (GetExplicitPadding returns undefined) resolve
-	-- this floor to 0, so behavior there is unchanged. When a footer IS
-	-- present, footerClearance (its real measured overlap) is used as-is
-	-- exactly as before — this floor never applies then, since the
-	-- footer's own overlap already reserves whatever space it needs.
 	local _result_1
 	if overlayFooter == nil then
 		local _result_2 = SpacingHelper:GetExplicitPadding(theme.components.box.padding, theme.default.spacing)
@@ -451,12 +417,6 @@ local Card = React.forwardRef(function(props, ref)
 		_result_1 = 0
 	end
 	local explicitBoxBottomFloor = _result_1
-	-- When an overlay header and/or footer measurably overlaps into the
-	-- Box (headerClearance/footerClearance > 0), or the footer-absent
-	-- floor above is nonzero, reserve that much extra top/bottom padding
-	-- via resolvedPadding — this takes over Box's own outer padding,
-	-- which is otherwise 0/0/0/0 since Card always forces spacing="None"
-	-- on Box below.
 	local _result_2
 	if headerClearance > 0 or footerClearance > 0 or explicitBoxBottomFloor > 0 then
 		local _object = table.clone(boxProps)
@@ -486,23 +446,6 @@ local Card = React.forwardRef(function(props, ref)
 	local cardBox = (React.createElement(Box, _attributes, React.createElement(VStack, {
 		spacing = "None",
 	}, flowChildren)))
-	-- ClipsDescendants is off so an overlay header/footer can protrude
-	-- past the Box's own edges (e.g. a plaque mounted above the top
-	-- border). This frame takes over the Position/AnchorPoint the Box
-	-- would otherwise have used, and auto-sizes to hug the Box (plus
-	-- whatever the overlay siblings protrude by).
-	--
-	-- `center` is stripped before deriving Position/AnchorPoint here,
-	-- the same way `cardBox`'s Box always gets `center={undefined}`:
-	-- when `center` is set, centering is handled by the outer
-	-- `isCentered` wrapper below (a UIListLayout that centers this
-	-- whole frame), not by this frame's own Position/AnchorPoint. If
-	-- both applied `center` at once, the UIListLayout would place the
-	-- frame using an (0,0)-anchor assumption while the frame itself
-	-- reported a (0.5,0.5) AnchorPoint, offsetting it by half its own
-	-- size and letting its (ClipsDescendants=false) contents spill out.
-	-- Explicit top/left/right/bottom/Position/AnchorPoint overrides are
-	-- unaffected and still apply directly to this frame.
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
 	_object.center = nil

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

@@ -0,0 +1,14 @@
+import React from "@rbxts/react";
+import { IntentElementProps, PositionElementProps, ScalableElementProps, SizeElementProps, ZIndexElementProps } from "../../Interfaces";
+export interface ProgressBarProps extends IntentElementProps, ScalableElementProps, SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<ImageLabel> {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    valueFormatter?: (value: number, max: number) => string;
+    name?: string;
+    striped?: boolean;
+    stripeDuration?: number;
+    stripeDirection?: number;
+}
+export declare const ProgressBar: React.ForwardRefExoticComponent<Omit<ProgressBarProps, "ref"> & React.RefAttributes<ImageLabel>>;