@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Layout/VStack.luau

@@ -5,16 +5,23 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function VStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Vertical,
-		HorizontalFlex = props.HorizontalFlex or Enum.UIFlexAlignment.Fill,
-		VerticalFlex = props.VerticalFlex,
-		VerticalAlignment = props.VerticalAlignment or props.valign,
-		Padding = props.Padding or UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing)),
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Change = props.Change,
-		Event = props.Event,
-	}), props.children)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "VStack"
+	end
+	_attributes.key = _condition
+	_attributes.FillDirection = Enum.FillDirection.Vertical
+	_attributes.HorizontalFlex = props.HorizontalFlex or Enum.UIFlexAlignment.Fill
+	_attributes.VerticalFlex = props.VerticalFlex
+	_attributes.VerticalAlignment = props.VerticalAlignment or props.valign
+	_attributes.HorizontalAlignment = props.HorizontalAlignment
+	_attributes.Padding = props.Padding or UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
+	_attributes.Wraps = props.Wraps
+	_attributes.SortOrder = Enum.SortOrder.LayoutOrder
+	_attributes.Change = props.Change
+	_attributes.Event = props.Event
+	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", _attributes), props.children)
 end
 return {
 	VStack = VStack,

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

@@ -5,9 +5,12 @@ export * from './Draggable';
 export * from './Droppable';
 export * from './Fieldset';
 export * from './FlexItem';
+export * from './Grid';
 export * from './Group';
 export * from './HStack';
+export * from './Pagination';
 export * from './Row';
 export * from './Scroller';
 export * from './Tabs';
+export * from './Table';
 export * from './VStack';

package/out/Components/Layout/init.luau

@@ -22,12 +22,18 @@ 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
 for _k, _v in TS.import(script, script, "HStack") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Pagination") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Row") or {} do
 	exports[_k] = _v
 end
@@ -37,6 +43,9 @@ end
 for _k, _v in TS.import(script, script, "Tabs") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Table") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "VStack") or {} do
 	exports[_k] = _v
 end

package/out/Components/Navigation/Menu.d.ts

@@ -7,6 +7,7 @@ export declare function MenuItem(props: MenuItemProps): React.JSX.Element;
 interface MenuProps {
     title: string;
     collapsed?: boolean;
+    name?: string;
 }
 type MenuComponent = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<ImageLabel>> & {
     Item: typeof MenuItem;

package/out/Components/Navigation/Menu.luau

@@ -14,6 +14,7 @@ local NavigationContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local function MenuItem(props)
 	local context = React.useContext(NavigationContext)
 	return React.createElement(Button, {
+		name = "MenuItem",
 		text = if not context.collapsed then props.title else nil,
 		icon = props.icon,
 		Event = props.Event,
@@ -26,19 +27,26 @@ local Menu = React.forwardRef(function(props, ref)
 		_condition = false
 	end
 	local collapsed, setCollapsed = React.useState(_condition)
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Menu"
+	end
+	_attributes.name = _condition_1
+	_attributes.ref = ref
 	return React.createElement(NavigationContext.Provider, {
 		value = {
 			collapsed = collapsed,
 		},
-	}, React.createElement(Container, {
-		ref = ref,
-	}, React.createElement(Group, nil, React.createElement(VStack, {
+	}, React.createElement(Container, _attributes, React.createElement(Group, nil, React.createElement(VStack, {
 		spacing = "sm",
 	}, React.createElement(Container, {
+		name = "MenuHeader",
 		group = true,
 	}, React.createElement(HStack, {
 		valign = "Center",
 	}, React.createElement(Button, {
+		name = "MenuToggleButton",
 		icon = "bars",
 		LayoutOrder = 1,
 		Event = {
@@ -47,6 +55,7 @@ local Menu = React.forwardRef(function(props, ref)
 			end,
 		},
 	}), not collapsed and React.createElement(Text, {
+		name = "MenuTitle",
 		text = props.title,
 		variant = "heading",
 		LayoutOrder = 2,

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

@@ -1,9 +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
@@ -17,7 +18,13 @@ local Box = React.forwardRef(function(props, ref)
 		_condition = theme.components.box.borderThickness
 	end
 	local borderThickness = _condition
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Box"
+	end
+	local name = _condition_1
 	local _attributes = {
+		name = name,
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -25,16 +32,17 @@ local Box = React.forwardRef(function(props, ref)
 	end
 	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
 	_attributes.AutomaticSize = SizeHelper:GetAutoSize(props)
-	local _condition_1 = props.BackgroundTransparency
-	if _condition_1 == nil then
-		_condition_1 = theme.components.box.backgroundTransparency
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = theme.components.box.backgroundTransparency
 	end
-	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BackgroundTransparency = _condition_2
 	_attributes.BackgroundColor3 = props.BackgroundColor3 or theme.components.box.backgroundColor
 	_attributes.ZIndex = props.ZIndex
 	_attributes.Event = props.Event
 	_attributes.backgroundImage = props["background-image"] or theme.components.box.backgroundImage
 	local _exp = borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = props["border-color"] or theme.components.box.borderColor,
@@ -42,10 +50,13 @@ local Box = React.forwardRef(function(props, ref)
 	local _attributes_1 = table.clone(props)
 	setmetatable(_attributes_1, nil)
 	_attributes_1.value = theme.components.box.boxShadow
+	_attributes_1.name = `{name}BoxShadow`
 	return React.createElement(Container, _attributes, _exp, React.createElement(BoxShadow, _attributes_1), React.createElement(Padding, {
 		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.d.ts

@@ -23,6 +23,7 @@ type CardComponent = React.ForwardRefExoticComponent<CardProps & React.RefAttrib
     Header: typeof CardHeader;
     Footer: typeof CardFooter;
     Body: typeof CardBody;
+    name?: string;
 };
 declare const Card: CardComponent;
 export { Card };

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
@@ -165,6 +133,7 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardHeader",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -179,6 +148,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)
@@ -190,7 +160,9 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local _exp = React.createElement(Padding, {
 		resolvedPadding = padding,
 	})
-	local _attributes_1 = {}
+	local _attributes_1 = {
+		key = "Stroke",
+	}
 	local _condition = theme.components.card.header.borderThickness
 	if _condition == nil then
 		_condition = theme.components.card.borderThickness
@@ -199,6 +171,7 @@ local CardHeader = React.forwardRef(function(props, ref)
 	_attributes_1.Color = intent.borderColor
 	_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),
@@ -207,16 +180,9 @@ local CardHeader = React.forwardRef(function(props, ref)
 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",
 		ref = ref,
 		Size = SizeHelper:GetSize(props, UDim2.fromScale(0, 0)),
 	}
@@ -246,6 +212,7 @@ local CardFooter = React.forwardRef(function(props, ref)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardFooter",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -260,6 +227,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)
@@ -271,7 +239,9 @@ local CardFooter = React.forwardRef(function(props, ref)
 	local _exp = React.createElement(Padding, {
 		resolvedPadding = padding,
 	})
-	local _attributes_1 = {}
+	local _attributes_1 = {
+		key = "Stroke",
+	}
 	local _condition = theme.components.card.footer.borderThickness
 	if _condition == nil then
 		_condition = theme.components.card.borderThickness
@@ -280,6 +250,7 @@ local CardFooter = React.forwardRef(function(props, ref)
 	_attributes_1.Color = intent.borderColor
 	_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,
@@ -288,18 +259,6 @@ local CardFooter = React.forwardRef(function(props, ref)
 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()
@@ -325,10 +284,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
@@ -337,8 +292,11 @@ local Card = React.forwardRef(function(props, ref)
 			if child == nil then
 				return nil
 			end
-			if React.isValidElement(child) and child.type == CardHeader and header == nil then
-				local headerElement = child
+			local directHeader = if React.isValidElement(child) and child.type == CardHeader then child else nil
+			local wrappedChild = if React.isValidElement(child) then (child.props).children else nil
+			local wrappedHeader = if React.isValidElement(wrappedChild) and wrappedChild.type == CardHeader then wrappedChild else nil
+			local headerElement = directHeader or wrappedHeader
+			if headerElement ~= nil and header == nil then
 				local _condition = headerElement.props.overlay
 				if _condition == nil then
 					local _result = theme.components.card.header.position
@@ -348,7 +306,7 @@ local Card = React.forwardRef(function(props, ref)
 					_condition = (_result == "absolute")
 				end
 				if _condition then
-					header = headerElement
+					header = child
 					return nil
 				end
 			end
@@ -380,56 +338,9 @@ local Card = React.forwardRef(function(props, ref)
 	local overlayHeader = _binding.overlayHeader
 	local overlayFooter = _binding.overlayFooter
 	local hasOverlay = overlayHeader ~= nil or overlayFooter ~= nil
-	React.useEffect(function()
-		if not hasOverlay then
-			return nil
-		end
-		local frame = overlayWrapperRef.current
-		if not frame then
-			return nil
-		end
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't
-		-- back this ref with an instance that supports property-changed
-		-- signals, so guard the subscription instead of throwing and
-		-- losing overlay clearance tracking.
-		local positionConn
-		local sizeConn
-		pcall(function()
-			positionConn = frame:GetPropertyChangedSignal("AbsolutePosition"):Connect(function()
-				return setWrapperAbsoluteY(frame.AbsolutePosition.Y)
-			end)
-		end)
-		pcall(function()
-			sizeConn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				return setWrapperAbsoluteSize(frame.AbsoluteSize)
-			end)
-		end)
-		return function()
-			local _result = positionConn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-			local _result_1 = sizeConn
-			if _result_1 ~= nil then
-				_result_1:Disconnect()
-			end
-		end
-	end, { hasOverlay })
-	-- 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)
@@ -447,18 +358,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)
@@ -474,12 +373,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)
@@ -497,6 +390,11 @@ local Card = React.forwardRef(function(props, ref)
 	local boxPropsWithOverlayClearance = _result_2
 	local _attributes = table.clone(boxPropsWithOverlayClearance)
 	setmetatable(_attributes, nil)
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Card"
+	end
+	_attributes.name = _condition
 	_attributes.ref = ref
 	_attributes.center = nil
 	_attributes.spacing = "None"
@@ -504,46 +402,50 @@ 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
 	local wrapperPositionProps = _object
-	local boxWithOverlay = if hasOverlay then (React.createElement("frame", {
-		ref = overlayWrapperRef,
-		BackgroundTransparency = 1,
-		ClipsDescendants = false,
-		Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1)),
-		AutomaticSize = SizeHelper:GetAutoSize(props),
-		Position = SizeHelper:GetPosition(wrapperPositionProps),
-		AnchorPoint = SizeHelper:GetAnchor(wrapperPositionProps),
-		ZIndex = props.ZIndex,
-		LayoutOrder = props.LayoutOrder,
-	}, cardBox, overlayHeader, overlayFooter)) else cardBox
+	local _result_3
+	if hasOverlay then
+		local _attributes_1 = {}
+		local _condition_1 = props.name
+		if _condition_1 == nil then
+			_condition_1 = "CardOverlayWrapper"
+		end
+		_attributes_1.key = _condition_1
+		_attributes_1.ref = overlayWrapperRef
+		_attributes_1.BackgroundTransparency = 1
+		_attributes_1.ClipsDescendants = false
+		_attributes_1.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
+		_attributes_1.AutomaticSize = SizeHelper:GetAutoSize(props)
+		_attributes_1.Position = SizeHelper:GetPosition(wrapperPositionProps)
+		_attributes_1.AnchorPoint = SizeHelper:GetAnchor(wrapperPositionProps)
+		_attributes_1.ZIndex = props.ZIndex
+		_attributes_1.LayoutOrder = props.LayoutOrder
+		_attributes_1.Change = {
+			AbsolutePosition = function(instance)
+				return setWrapperAbsoluteY(instance.AbsolutePosition.Y)
+			end,
+			AbsoluteSize = function(instance)
+				return setWrapperAbsoluteSize(instance.AbsoluteSize)
+			end,
+		}
+		_result_3 = (React.createElement("frame", _attributes_1, cardBox, overlayHeader, overlayFooter))
+	else
+		_result_3 = cardBox
+	end
+	local boxWithOverlay = _result_3
 	local isCentered = props.center == true and props.Position == nil and props.AnchorPoint == nil
 	return React.createElement(CardContext.Provider, {
 		value = contextValue,
 	}, if isCentered then (React.createElement(Container, {
+		name = "CardCenterWrapper",
 		Size = UDim2.fromScale(1, 1),
 		ZIndex = props.ZIndex,
 		LayoutOrder = props.LayoutOrder,
 	}, React.createElement("uilistlayout", {
+		key = "CenterLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		VerticalAlignment = Enum.VerticalAlignment.Center,

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

@@ -6,5 +6,6 @@ export interface IconProps extends IconElementProps, ScalableElementProps, React
     spinning?: boolean;
     speed?: number;
     Rotation?: number | Binding<number>;
+    name?: string;
 }
 export declare function Icon(props: IconProps): React.JSX.Element;

package/out/Components/Surface/Icon.luau

@@ -20,11 +20,16 @@ local function SpinningIcon(props)
 		tween:setGoal(360)
 		tween:start()
 	end)
-	return React.createElement("frame", {
-		BackgroundTransparency = 1,
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-	}, React.createElement(Icon, {
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Icon"
+	end
+	_attributes.key = _condition_1
+	_attributes.BackgroundTransparency = 1
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	return React.createElement("frame", _attributes, React.createElement(Icon, {
 		Size = props.Size,
 		color = props.color,
 		icon = props.icon,
@@ -51,19 +56,23 @@ function Icon(props)
 		setmetatable(_attributes, nil)
 		return React.createElement(SpinningIcon, _attributes)
 	end
-	local _attributes = {
-		AnchorPoint = props.AnchorPoint,
-		Rotation = props.Rotation,
-		Size = props.Size or UDim2.fromOffset(size, size),
-		Position = props.Position,
-		LayoutOrder = props.LayoutOrder,
-		Image = if iconId == nil then nil else `rbxassetid://{iconId}`,
-	}
-	local _condition = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition = props.name
 	if _condition == nil then
-		_condition = 1
+		_condition = "Icon"
+	end
+	_attributes.key = _condition
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.Rotation = props.Rotation
+	_attributes.Size = props.Size or UDim2.fromOffset(size, size)
+	_attributes.Position = props.Position
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Image = if iconId == nil then nil else `rbxassetid://{iconId}`
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.ImageColor3 = props.color or theme.colors.intents.primary.default.textColor
 	_attributes.ZIndex = props.ZIndex
 	_attributes.Visible = props.Visible

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