@rbxts/react-clean-ui 1.0.38 → 1.2.2

package/out/Components/Surface/Card.luau

@@ -159,12 +159,13 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
 	local card = React.useContext(CardContext)
 	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.header.intents)
-	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.header.spacing))
+	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 _binding = resolveOverlayPosition(props, theme.components.card.header.position)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardHeader",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -190,7 +191,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 +202,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,40 +211,17 @@ local CardHeader = React.forwardRef(function(props, ref)
 end)
 local CardBody = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
-	-- Mirrors Box.tsx's own padding resolution (CardBody wraps its
-	-- children in a Container, not a Box, so it doesn't get Box's
-	-- automatic `box.padding` application for free) — apply the card
-	-- body's own theme padding only when the caller hasn't set explicit
-	-- padding props. `card.body.padding`, when set, is an intentional
-	-- full-override escape hatch and wins wholesale over everything
-	-- below. Absent that, top/bottom fall back to the same generic
-	-- md-scale default Header/Footer use for their own padding (NOT
-	-- `box.padding`'s top/bottom) — CardBody's bottom padding stacks
-	-- directly against an in-flow CardFooter's own top padding (the
-	-- VStack's spacing is "None"), so inheriting `box.padding`'s
-	-- vertical values here would double them up with Footer's/Header's
-	-- own padding. Left/right still inherit `box.padding` since nothing
-	-- else contributes horizontal padding at that seam.
+	-- 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 hasCustomPadding = paddingSourceProps.top ~= nil or paddingSourceProps.bottom ~= nil or paddingSourceProps.left ~= nil or paddingSourceProps.right ~= nil or paddingSourceProps.spacing ~= nil or paddingSourceProps.padding ~= nil or paddingSourceProps.resolvedPadding ~= nil
-	local _bodyThemePadding = theme.components.card.body
-	if _bodyThemePadding ~= nil then
-		_bodyThemePadding = _bodyThemePadding.padding
-	end
-	local bodyThemePadding = _bodyThemePadding
-	local boxThemePadding = theme.components.box.padding
-	local mdPadding = SpacingHelper:GetPadding(theme, "md")
-	local paddingProps = if hasCustomPadding then paddingSourceProps elseif bodyThemePadding ~= nil then {
-		resolvedPadding = CssHelper:parseCssQuad(bodyThemePadding),
-	} else {
-		resolvedPadding = {
-			top = mdPadding,
-			bottom = mdPadding,
-			left = if boxThemePadding ~= nil then CssHelper:parseCssQuad(boxThemePadding).left else mdPadding,
-			right = if boxThemePadding ~= nil then CssHelper:parseCssQuad(boxThemePadding).right else mdPadding,
-		},
-	}
 	local _attributes = {
+		name = "CardBody",
 		ref = ref,
 		Size = SizeHelper:GetSize(props, UDim2.fromScale(0, 0)),
 	}
@@ -248,20 +229,29 @@ local CardBody = React.forwardRef(function(props, ref)
 		_attributes[_k] = _v
 	end
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
-	local _attributes_1 = table.clone(paddingProps)
-	setmetatable(_attributes_1, nil)
+	local _attributes_1 = {}
+	local _result = theme.components.card.body
+	if _result ~= nil then
+		_result = _result.spacing
+	end
+	local _result_1 = theme.components.card.body
+	if _result_1 ~= nil then
+		_result_1 = _result_1.padding
+	end
+	_attributes_1.resolvedPadding = SpacingHelper:GetResolvedPadding(theme, paddingSourceProps, _result, _result_1)
 	return React.createElement(FlexItem, nil, React.createElement(Container, _attributes, React.createElement(Padding, _attributes_1), props.children))
 end)
 local CardFooter = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
 	local card = React.useContext(CardContext)
 	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.footer.intents)
-	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.footer.spacing))
+	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 _binding = resolveOverlayPosition(props, theme.components.card.footer.position)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardFooter",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -287,7 +277,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
@@ -296,6 +288,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,
@@ -353,8 +346,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
@@ -364,7 +360,7 @@ local Card = React.forwardRef(function(props, ref)
 					_condition = (_result == "absolute")
 				end
 				if _condition then
-					header = headerElement
+					header = child
 					return nil
 				end
 			end
@@ -428,29 +424,61 @@ local Card = React.forwardRef(function(props, ref)
 		_result = props
 	end
 	local boxProps = _result
-	-- When an overlay header and/or footer measurably overlaps into the
-	-- Box (headerClearance/footerClearance > 0), reserve that much extra
-	-- top/bottom padding via resolvedPadding — this takes over Box's own
-	-- outer padding, which is harmless since Card always forces
-	-- spacing="None" on Box below anyway (so it was always 0/0/0/0 until
-	-- now).
+	-- 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 headerClearance > 0 or footerClearance > 0 then
+	if overlayFooter == nil then
+		local _result_2 = SpacingHelper:GetExplicitPadding(theme.components.box.padding, theme.default.spacing)
+		if _result_2 ~= nil then
+			_result_2 = _result_2.bottom
+		end
+		local _condition = _result_2
+		if _condition == nil then
+			_condition = 0
+		end
+		_result_1 = _condition
+	else
+		_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)
 		setmetatable(_object, nil)
 		_object.resolvedPadding = {
 			top = headerClearance,
-			bottom = footerClearance,
+			bottom = math.max(footerClearance, explicitBoxBottomFloor),
 			left = 0,
 			right = 0,
 		}
-		_result_1 = _object
+		_result_2 = _object
 	else
-		_result_1 = boxProps
+		_result_2 = boxProps
 	end
-	local boxPropsWithOverlayClearance = _result_1
+	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"
@@ -479,33 +507,46 @@ local Card = React.forwardRef(function(props, ref)
 	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,
-		Change = {
+	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,
-		},
-	}, cardBox, overlayHeader, overlayFooter)) else cardBox
+		}
+		_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/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

@@ -27,7 +27,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 +53,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 +62,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 +114,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,26 @@
+-- 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
+-- 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)
+	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/spacing.helper.d.ts

@@ -1,7 +1,8 @@
-import { PaddingProps, ResolvedPadding, ScaleSize, ScaleSizeValue } from "../Interfaces";
+import { PaddingProps, ResolvedPadding, ScaleSize, ScaleSizeValue, ScaledCssPadding } from "../Interfaces";
 import { ThemeTemplate } from "../Theme";
 export declare class SpacingHelper {
-    static GetResolvedPadding(theme: ThemeTemplate, props: PaddingProps, component?: ScaleSizeValue<number>): ResolvedPadding;
     static GetPadding(theme: ThemeTemplate, spacing?: ScaleSize | "None", component?: ScaleSizeValue<number>): number;
+    static GetResolvedPadding(theme: ThemeTemplate, props: PaddingProps, componentSpacing?: ScaleSizeValue<number>, componentPadding?: ScaledCssPadding, defaultSpacing?: ScaleSize): ResolvedPadding;
+    static GetExplicitPadding(componentPadding: ScaledCssPadding | undefined, key: ScaleSize): ResolvedPadding | undefined;
     static ResolveNumberPadding(value: number): ResolvedPadding;
 }