@rbxts/react-clean-ui 1.0.38 → 1.2.2

package/out/Components/Layout/Tabs.luau

@@ -18,15 +18,14 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
 local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
-local function Tab(_props)
-	return nil
-end
-local function TabTitle(_props)
-	return nil
-end
-local function TabContent(props)
-	return nil
-end
+-- 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,
+})
 local function TabButtonContent(props)
 	local theme = React.useContext(CleanThemeContext)
 	local hover = React.useContext(HoverButtonContext)
@@ -46,63 +45,112 @@ local function TabButtonContent(props)
 	end
 	local intent = ColorHelper:getIntentColors(theme, "primary", _result_1, theme.components.tabs.button.intents)
 	return React.createElement(React.Fragment, nil, React.createElement(Corners, {
-		radius = theme.components.tabs.button.cornerRadius,
+		radius = theme.components.tabs.list.cornerRadius,
 	}), React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.button.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.tabs.button.spacing, theme.components.tabs.button.padding),
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
 	}), React.createElement(Text, {
+		name = "TabTitleText",
 		TextColor3 = intent.textColor,
 		text = props.text,
 		typography = TypographyHelper:getTypography(theme, nil, intent.typography),
 	}))
 end
-local Tabs = React.forwardRef(function(props, ref)
+-- 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 selected, setSelected = React.useState(0)
-	local tabs = React.useMemo(function()
-		local tabs = {}
-		React.Children.forEach(props.children, function(child)
-			if not React.isValidElement(child) or child.type ~= Tab then
-				return nil
-			end
-			local title
-			local content
-			local tab = child
-			React.Children.forEach(tab.props.children, function(tabChild)
-				if not React.isValidElement(tabChild) then
-					return nil
-				end
-				if tabChild.type == TabTitle then
-					title = (tabChild.props)
-				elseif tabChild.type == TabContent then
-					content = (tabChild.props).children
-				end
-			end)
-			if title ~= nil then
-				local _arg0 = {
-					title = title,
-					content = content,
-				}
-				table.insert(tabs, _arg0)
-			end
-		end)
-		return tabs
-	end, { props.children })
-	local tabCount = #tabs
+	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 >= tabCount then
-			setSelected(math.max(0, tabCount - 1))
+		if selected == nil then
+			setSelected(props.value)
 		end
-	end, { selected, tabCount })
-	local selectedTab = tabs[selected + 1]
+	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)
 	local buttonFocus = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.tabs.button.intents)
 	local buttonDefaultBackgroundImage = CssHelper:resolveBackgroundImage(buttonDefault.backgroundImage)
 	local buttonHoverBackgroundImage = CssHelper:resolveBackgroundImage(buttonHover.backgroundImage)
 	local buttonFocusBackgroundImage = CssHelper:resolveBackgroundImage(buttonFocus.backgroundImage)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HoverButton, {
+		isSelected = isSelected,
+		name = `TabButton-{props.value}`,
+		default = {
+			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundColor3 = buttonDefault.backgroundColor,
+			BackgroundTransparency = buttonDefault.backgroundTransparency,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Image = buttonDefaultBackgroundImage.Image,
+			ImageColor3 = buttonDefaultBackgroundImage.ImageColor3,
+			ImageTransparency = buttonDefaultBackgroundImage.ImageTransparency,
+			ScaleType = buttonDefaultBackgroundImage.ScaleType,
+			SliceCenter = buttonDefaultBackgroundImage.SliceCenter,
+			SliceScale = buttonDefaultBackgroundImage.SliceScale,
+			TileSize = buttonDefaultBackgroundImage.TileSize,
+			Event = {
+				Activated = function()
+					setSelected(props.value)
+				end,
+			},
+		},
+		hover = {
+			BackgroundColor3 = buttonHover.backgroundColor,
+			BackgroundTransparency = buttonHover.backgroundTransparency,
+			Image = buttonHoverBackgroundImage.Image,
+			ImageColor3 = buttonHoverBackgroundImage.ImageColor3,
+			ImageTransparency = buttonHoverBackgroundImage.ImageTransparency,
+			ScaleType = buttonHoverBackgroundImage.ScaleType,
+			SliceCenter = buttonHoverBackgroundImage.SliceCenter,
+			SliceScale = buttonHoverBackgroundImage.SliceScale,
+			TileSize = buttonHoverBackgroundImage.TileSize,
+		},
+		focus = {
+			BackgroundColor3 = buttonFocus.backgroundColor,
+			BackgroundTransparency = buttonFocus.backgroundTransparency,
+			Image = buttonFocusBackgroundImage.Image,
+			ImageColor3 = buttonFocusBackgroundImage.ImageColor3,
+			ImageTransparency = buttonFocusBackgroundImage.ImageTransparency,
+			ScaleType = buttonFocusBackgroundImage.ScaleType,
+			SliceCenter = buttonFocusBackgroundImage.SliceCenter,
+			SliceScale = buttonFocusBackgroundImage.SliceScale,
+			TileSize = buttonFocusBackgroundImage.TileSize,
+		},
+	}, 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
+	return React.createElement(Container, {
+		name = `TabContent_{props.value}`,
+		width = "100%",
+		Visible = selected == props.value,
+	}, props.children)
+end
+local TabsList = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
+		name = "TabsList",
 		ref = ref,
 		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
 		width = "100%",
@@ -113,87 +161,56 @@ local Tabs = React.forwardRef(function(props, ref)
 	end
 	_attributes.BackgroundTransparency = _condition
 	_attributes.backgroundImage = theme.components.tabs.list.backgroundImage
-	local _exp = React.createElement(Corners, {
+	return React.createElement(Container, _attributes, React.createElement(Corners, {
 		radius = theme.components.tabs.list.cornerRadius,
-	})
-	local _exp_1 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing),
-	})
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#tabs)
-	local _callback = function(tab, index)
-		return React.createElement(HoverButton, {
-			isSelected = selected == index,
-			default = {
-				Size = UDim2.fromScale(0, 0),
-				AutomaticSize = Enum.AutomaticSize.XY,
-				BackgroundColor3 = buttonDefault.backgroundColor,
-				BackgroundTransparency = buttonDefault.backgroundTransparency,
-				BorderSizePixel = 0,
-				AutoButtonColor = false,
-				Image = buttonDefaultBackgroundImage.Image,
-				ImageColor3 = buttonDefaultBackgroundImage.ImageColor3,
-				ImageTransparency = buttonDefaultBackgroundImage.ImageTransparency,
-				ScaleType = buttonDefaultBackgroundImage.ScaleType,
-				SliceCenter = buttonDefaultBackgroundImage.SliceCenter,
-				SliceScale = buttonDefaultBackgroundImage.SliceScale,
-				TileSize = buttonDefaultBackgroundImage.TileSize,
-				Event = {
-					Activated = function()
-						setSelected(index)
-					end,
-				},
-			},
-			hover = {
-				BackgroundColor3 = buttonHover.backgroundColor,
-				BackgroundTransparency = buttonHover.backgroundTransparency,
-				Image = buttonHoverBackgroundImage.Image,
-				ImageColor3 = buttonHoverBackgroundImage.ImageColor3,
-				ImageTransparency = buttonHoverBackgroundImage.ImageTransparency,
-				ScaleType = buttonHoverBackgroundImage.ScaleType,
-				SliceCenter = buttonHoverBackgroundImage.SliceCenter,
-				SliceScale = buttonHoverBackgroundImage.SliceScale,
-				TileSize = buttonHoverBackgroundImage.TileSize,
-			},
-			focus = {
-				BackgroundColor3 = buttonFocus.backgroundColor,
-				BackgroundTransparency = buttonFocus.backgroundTransparency,
-				Image = buttonFocusBackgroundImage.Image,
-				ImageColor3 = buttonFocusBackgroundImage.ImageColor3,
-				ImageTransparency = buttonFocusBackgroundImage.ImageTransparency,
-				ScaleType = buttonFocusBackgroundImage.ScaleType,
-				SliceCenter = buttonFocusBackgroundImage.SliceCenter,
-				SliceScale = buttonFocusBackgroundImage.SliceScale,
-				TileSize = buttonFocusBackgroundImage.TileSize,
-			},
-		}, React.createElement(TabButtonContent, {
-			text = tab.title.text,
-		}))
-	end
-	for _k, _v in tabs do
-		_newValue[_k] = _callback(_v, _k - 1, tabs)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	local _exp_2 = React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
-	local _exp_3 = React.createElement("uistroke", {
+	}), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
+	}), React.createElement(HStack, nil, props.children))
+end)
+local TabsBody = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	return React.createElement(Container, {
+		name = "TabsBody",
+		ref = ref,
+		width = "100%",
+		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
+	}, React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = theme.components.tabs.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.tabs.borderColor,
-	})
-	local _exp_4 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing),
-	})
-	local _exp_5 = React.createElement(Corners, {
-		radius = theme.components.tabs.list.cornerRadius,
-	})
-	local _result = selectedTab
-	if _result ~= nil then
-		_result = _result.content
-	end
-	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result))
+	}), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
+	}), React.createElement(Corners, {
+		radius = theme.components.tabs.cornerRadius,
+	}), 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()
+		return {
+			selected = selected,
+			setSelected = setSelected,
+		}
+	end, { selected })
+	return React.createElement(TabsContext.Provider, {
+		value = contextValue,
+	}, React.createElement(VStack, nil, props.children))
 end)
+Tabs.List = TabsList
+Tabs.Body = TabsBody
 Tabs.Title = TabTitle
-Tabs.Tab = Tab
 Tabs.Content = TabContent
 return {
 	Tabs = Tabs,

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

@@ -4,11 +4,14 @@ interface VStackProps extends SpacedElementProps {
     valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
     children?: React.ReactNode;
     HorizontalFlex?: Enum.UIFlexAlignment;
+    HorizontalAlignment?: Enum.HorizontalAlignment;
     VerticalFlex?: Enum.UIFlexAlignment;
     VerticalAlignment?: Enum.VerticalAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
     Padding?: UDim | Binding<UDim>;
+    Wraps?: boolean;
+    name?: string;
 }
 export declare function VStack(props: VStackProps): React.JSX.Element;
 export {};

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

@@ -7,7 +7,9 @@ export * from './Fieldset';
 export * from './FlexItem';
 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

@@ -28,6 +28,9 @@ 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 +40,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,28 +27,38 @@ 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 = {
 			Activated = function()
 				setCollapsed(not collapsed)
 			end,
 		},
 	}), not collapsed and React.createElement(Text, {
+		name = "MenuTitle",
 		text = props.title,
 		variant = "heading",
+		LayoutOrder = 2,
 	}))), React.createElement(FlexItem, {
 		mode = "Fill",
 	}, React.createElement(Scroller, {

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

@@ -5,5 +5,6 @@ export interface BoxProps extends SpacedElementProps, ShadowElementProps, Backgr
     'border-thickness'?: number;
     'border-color'?: Color3;
     'background-image'?: CssBackgroundImage;
+    name?: string;
 }
 export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Surface/Box.luau

@@ -9,16 +9,21 @@ local BoxShadow = _Decorator.BoxShadow
 local Container = TS.import(script, script.Parent.Parent, "Layout").Container
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local SizeHelper = _Helpers.SizeHelper
-local CssHelper = _Helpers.CssHelper
+local SpacingHelper = _Helpers.SpacingHelper
 local Box = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
-	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 themePadding = theme.components.box.padding
-	local paddingProps = if not hasCustomPadding and themePadding ~= nil then {
-		resolvedPadding = CssHelper:parseCssQuad(themePadding),
-	} else paddingSourceProps
+	local _condition = props["border-thickness"]
+	if _condition == nil then
+		_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
@@ -26,31 +31,28 @@ local Box = React.forwardRef(function(props, ref)
 	end
 	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
 	_attributes.AutomaticSize = SizeHelper:GetAutoSize(props)
-	local _condition = props.BackgroundTransparency
-	if _condition == nil then
-		_condition = theme.components.box.backgroundTransparency
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = theme.components.box.backgroundTransparency
 	end
-	_attributes.BackgroundTransparency = _condition
+	_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 _attributes_1 = {}
-	local _condition_1 = props["border-thickness"]
-	if _condition_1 == nil then
-		_condition_1 = theme.components.box.borderThickness
-	end
-	_attributes_1.Thickness = _condition_1
-	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
-	_attributes_1.Color = props["border-color"] or theme.components.box.borderColor
-	local _exp = React.createElement("uistroke", _attributes_1)
-	local _attributes_2 = table.clone(props)
-	setmetatable(_attributes_2, nil)
-	_attributes_2.value = theme.components.box.boxShadow
-	local _exp_1 = React.createElement(BoxShadow, _attributes_2)
-	local _attributes_3 = table.clone(paddingProps)
-	setmetatable(_attributes_3, nil)
-	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(Padding, _attributes_3), React.createElement(Corners, {
+	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,
+	}))
+	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,
 	}), props.children)
 end)

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

@@ -1,9 +1,11 @@
 import React from "@rbxts/react";
 import { BoxProps } from "./Box";
-import { IntentElementProps, PositionElementProps, ZIndexElementProps } from "../../Interfaces";
-interface CardHeaderProps extends IntentElementProps, PositionElementProps, ZIndexElementProps {
+import { CssPadding, IntentElementProps, PositionElementProps, ResolvedPadding, SpacedElementProps, ZIndexElementProps } from "../../Interfaces";
+interface CardHeaderProps extends IntentElementProps, PositionElementProps, ZIndexElementProps, SpacedElementProps {
     children?: React.ReactNode;
     overlay?: boolean;
+    padding?: CssPadding;
+    resolvedPadding?: ResolvedPadding;
 }
 export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<ImageLabel>>;
 interface CardBodyProps extends BoxProps {
@@ -11,6 +13,8 @@ interface CardBodyProps extends BoxProps {
 export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<ImageLabel>>;
 interface CardFooterProps extends BoxProps, IntentElementProps {
     overlay?: boolean;
+    padding?: CssPadding;
+    resolvedPadding?: ResolvedPadding;
 }
 export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<ImageLabel>>;
 interface CardProps extends BoxProps, IntentElementProps {
@@ -19,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 };