@rbxts/uiblox 0.2.0-alpha.37 → 0.2.0-alpha.38

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -2,9 +2,15 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	local disabled = _param.disabled
+	local heading = theme.typography.variants.h6
+	local padX = theme.padding.calc(1.5)
+	local padY = theme.padding.calc(1)
+	local icon = controlMetrics(theme.density).icon
+	local firstLine = padY + math.floor((heading.size * heading.leading) / 2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -27,20 +33,38 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			Active = disabled ~= true,
 			Selectable = disabled ~= true,
 		},
+		hover = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = 0,
+		},
+		tail = {
+			PaddingBottom = UDim.new(0, padY),
+		},
+		band = {
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		title = {
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2 + icon), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextWrapped = true,
 			TextColor3 = theme.palette.text.primary,
 			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
 		copy = {
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2 + icon), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -59,25 +83,14 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
+	_object_1.TextWrapped = true
 	_object_1.TextColor3 = theme.palette.text.secondary
 	_object_1.TextTransparency = if disabled == true then 0.5 else 0
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object[_left] = _object_1
 	_object.icon = {
-		Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
-		Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
+		Position = UDim2.new(1, -padX, 0, firstLine),
 		AnchorPoint = Vector2.new(1, 0.5),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		ScaleType = Enum.ScaleType.Fit,
-		ImageColor3 = theme.palette.text.primary,
-		ImageTransparency = if disabled == true then 0.5 else 0,
-	}
-	_object.padding = {
-		PaddingTop = UDim.new(0, theme.padding.calc(1)),
-		PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-		PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-		PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
 	}
 	_object.body = {
 		LayoutOrder = 2,
@@ -89,6 +102,11 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	_object.corner = {
 		CornerRadius = UDim.new(0, theme.shape.borderRadius),
 	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		Thickness = 1,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
 	return createStyles(_object)
 end)
 local default = useAccordionStyles

package/out/ui/packages/alert/components/Alert.luau

@@ -1,8 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
 local alertAction = TS.import(script, script.Parent, "alertAction").alertAction
 local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
@@ -53,18 +53,22 @@ local function Alert(props)
 	local _condition_2 = dismissible
 	if _condition_2 then
 		local _attributes_3 = {
-			key = "Close",
+			id = "Close",
+			glyph = "close",
 		}
-		for _k, _v in styles.close do
-			_attributes_3[_k] = _v
+		local _result = (styles.closeGlyph).Size
+		if _result ~= nil then
+			_result = _result.X.Offset
 		end
-		_attributes_3.Image = tostring(Icons.Close)
-		_attributes_3.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_3))
+		local _condition_3 = _result
+		if _condition_3 == nil then
+			_condition_3 = 16
+		end
+		_attributes_3.iconSize = _condition_3
+		_attributes_3.tint = (styles.closeGlyph).ImageColor3
+		_attributes_3.className = styles.close
+		_attributes_3.onClick = onClose
+		_condition_2 = (React.createElement(IconButton, _attributes_3))
 	end
 	local _attributes_3 = {
 		key = "Body",

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
@@ -9,7 +10,17 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local dismissible = _param.dismissible
 	local filled = _param.filled
 	local tone = theme.palette.status[alertSeverity(severity)]
-	local closeSize = theme.spacing.calc(2)
+	local padX = theme.padding.calc(2)
+	local padY = theme.padding.calc(1.5)
+	local _condition = theme.typography.fontSizes.body
+	if _condition == nil then
+		_condition = theme.typography.variants.body.size
+	end
+	local glyph = _condition
+	local icon = controlMetrics(theme.density).icon
+	local hit = math.max(theme.spacing.calc(3), icon + theme.padding.calc(2))
+	local closeGap = if dismissible == true then hit + theme.padding.calc(1) else 0
+	local ink = if filled == true then tone.on else theme.palette.text.primary
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -18,10 +29,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+			PaddingBottom = UDim.new(0, padY),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
@@ -33,8 +41,9 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 		body = {
+			Position = UDim2.new(0, padX, 0, padY),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			Size = UDim2.new(1, -(padX * 2 + closeGap), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -46,57 +55,59 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			Padding = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = if filled == true then tone.on else tone.main,
+			TextColor3 = ink,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
 			LayoutOrder = 1,
 		},
 	}
 	local _left = "message"
 	local _object_1 = {
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Font = theme.typography.fontFamilies.default,
 	}
 	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.caption
-	if _condition == nil then
-		_condition = theme.typography.fontSizes.body
+	local _condition_1 = theme.typography.fontSizes.caption
+	if _condition_1 == nil then
+		_condition_1 = theme.typography.fontSizes.body
 	end
-	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
+	_object_1[_left_1] = _condition_1
+	_object_1.TextColor3 = ink
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
 	_object.action = {
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		TextWrapped = true,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Font = theme.typography.fontFamilies.default,
 		TextSize = theme.typography.fontSizes.body,
-		TextColor3 = if filled == true then tone.on else tone.main,
+		TextColor3 = ink,
 		AutoButtonColor = false,
 		LayoutOrder = 3,
 	}
 	_object.close = {
-		Size = UDim2.fromOffset(closeSize, closeSize),
-		Position = UDim2.new(1, 0, 0, 0),
-		AnchorPoint = Vector2.new(1, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
-		ScaleType = Enum.ScaleType.Fit,
+		Size = UDim2.fromOffset(hit, hit),
+		Position = UDim2.new(1, -padX, 0, padY + glyph / 2),
+		AnchorPoint = Vector2.new(1, 0.5),
 		ZIndex = 2,
 	}
+	_object.closeGlyph = {
+		Size = UDim2.fromOffset(icon, icon),
+		ImageColor3 = ink,
+	}
 	return createStyles(_object)
 end)
 local default = useAlertStyles

package/out/ui/packages/appBar/components/AppBar.luau

@@ -43,7 +43,10 @@ local function AppBar(props)
 				_attributes[_k] = _v
 			end
 			_attributes.Text = title
-			_condition = React.createElement("textlabel", _attributes)
+			_condition = (React.createElement("textlabel", _attributes, hasActions and React.createElement("uiflexitem", {
+				key = "Flex",
+				FlexMode = Enum.UIFlexMode.Fill,
+			})))
 		end
 		_result = _condition
 	else
@@ -53,7 +56,11 @@ local function AppBar(props)
 		for _k, _v in styles.titles do
 			_attributes[_k] = _v
 		end
-		local _exp = React.createElement("uilistlayout", {
+		local _exp = hasActions and React.createElement("uiflexitem", {
+			key = "Flex",
+			FlexMode = Enum.UIFlexMode.Fill,
+		})
+		local _exp_1 = React.createElement("uilistlayout", {
 			FillDirection = Enum.FillDirection.Vertical,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
@@ -68,8 +75,10 @@ local function AppBar(props)
 			for _k, _v in styles.title do
 				_attributes_1[_k] = _v
 			end
-			_attributes_1.Size = UDim2.new(0, 0, 0, 0)
-			_attributes_1.AutomaticSize = Enum.AutomaticSize.XY
+			_attributes_1.Size = UDim2.new(1, 0, 0, 0)
+			_attributes_1.AutomaticSize = Enum.AutomaticSize.Y
+			_attributes_1.TextWrapped = true
+			_attributes_1.TextTruncate = Enum.TextTruncate.None
 			_attributes_1.Text = title
 			_attributes_1.LayoutOrder = 1
 			_condition = (React.createElement("textlabel", _attributes_1))
@@ -82,7 +91,7 @@ local function AppBar(props)
 		end
 		_attributes_1.Text = line
 		_attributes_1.LayoutOrder = 2
-		_result = (React.createElement("frame", _attributes, _exp, _condition, React.createElement("textlabel", _attributes_1)))
+		_result = (React.createElement("frame", _attributes, _exp, _exp_1, _condition, React.createElement("textlabel", _attributes_1)))
 	end
 	local titleLabel = _result
 	local _attributes = {
@@ -97,16 +106,29 @@ local function AppBar(props)
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.padding)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uipadding", _attributes_1)
-	local _exp_1 = elevation == "raised" and React.createElement(Shadow)
+	local _exp = elevation == "raised" and React.createElement(Shadow)
+	local _condition_1 = elevation == "flat" and color == "default"
+	if _condition_1 then
+		local _attributes_1 = {
+			key = "Divider",
+		}
+		for _k, _v in styles.divider do
+			_attributes_1[_k] = _v
+		end
+		_condition_1 = React.createElement("frame", _attributes_1)
+	end
+	local _attributes_1 = {
+		key = "Inset",
+	}
+	for _k, _v in styles.inset do
+		_attributes_1[_k] = _v
+	end
 	local _result_1
 	if hasActions then
 		local _attributes_2 = table.clone(styles.row)
 		setmetatable(_attributes_2, nil)
-		local _exp_2 = React.createElement("uilistlayout", _attributes_2)
-		local _exp_3 = titleLabel
+		local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+		local _exp_2 = titleLabel
 		local _attributes_3 = {
 			key = "Actions",
 		}
@@ -120,11 +142,11 @@ local function AppBar(props)
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-		}, _exp_2, _exp_3, React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), children)))
+		}, _exp_1, _exp_2, React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), children)))
 	else
 		_result_1 = titleLabel
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, React.createElement("frame", _attributes_1, _result_1))
 end
 local default = AppBar
 return {

package/out/ui/packages/appBar/components/AppBar.styles.luau

@@ -16,6 +16,8 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	if hasActions == nil then
 		hasActions = false
 	end
+	local heading = theme.typography.variants.h6
+	local pad = theme.padding.calc(2)
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
@@ -23,9 +25,18 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 			BorderSizePixel = 0,
 			ZIndex = 11000,
 		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		divider = {
+			AnchorPoint = Vector2.new(0, 1),
+			Position = UDim2.fromScale(0, 1),
+			Size = UDim2.new(1, 0, 0, 1),
+			BackgroundColor3 = theme.palette.border,
+			BorderSizePixel = 0,
+		},
+		inset = {
+			Position = UDim2.new(0, pad, 0, 0),
+			Size = UDim2.new(1, -(pad * 2), 1, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
@@ -33,51 +44,46 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 			HorizontalFlex = Enum.UIFlexAlignment.SpaceBetween,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
+		title = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.None,
+			Size = if hasActions then UDim2.new(0, 0, 1, 0) else UDim2.new(1, 0, 1, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextYAlignment = Enum.TextYAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		titles = {
+			LayoutOrder = 1,
+			AutomaticSize = if hasActions then Enum.AutomaticSize.None else Enum.AutomaticSize.Y,
+			Size = if hasActions then UDim2.new(0, 0, 1, 0) else UDim2.new(1, 0, 1, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 	}
-	local _left = "title"
+	local _left = "subtitle"
 	local _object_1 = {
-		LayoutOrder = 1,
-		AutomaticSize = if hasActions then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
-		Size = if hasActions then UDim2.new(0, 0, 1, 0) else UDim2.new(1, 0, 1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		TextWrapped = true,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Font = theme.typography.fontFamilies.default,
 	}
 	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.h3
+	local _condition = theme.typography.fontSizes.caption
 	if _condition == nil then
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary
+	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.secondary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
-	_object_1.TextYAlignment = Enum.TextYAlignment.Center
-	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
 	_object[_left] = _object_1
-	_object.titles = {
-		LayoutOrder = 1,
-		AutomaticSize = if hasActions then Enum.AutomaticSize.XY else Enum.AutomaticSize.Y,
-		Size = if hasActions then UDim2.fromScale(0, 0) else UDim2.new(1, 0, 1, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-	}
-	local _left_2 = "subtitle"
-	local _object_2 = {
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Size = UDim2.fromScale(0, 0),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		Font = theme.typography.fontFamilies.default,
-	}
-	local _left_3 = "TextSize"
-	local _condition_1 = theme.typography.fontSizes.caption
-	if _condition_1 == nil then
-		_condition_1 = theme.typography.fontSizes.body
-	end
-	_object_2[_left_3] = _condition_1
-	_object_2.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.secondary
-	_object_2.TextXAlignment = Enum.TextXAlignment.Left
-	_object[_left_2] = _object_2
 	_object.actions = {
 		LayoutOrder = 2,
 		AutomaticSize = Enum.AutomaticSize.X,

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -19,6 +19,8 @@ local function Autocomplete(props)
 	local empty = _binding.empty
 	local reducedMotion = _binding.reducedMotion
 	local size = _binding.size
+	local hasError = _binding.hasError
+	local helperText = _binding.helperText
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -38,6 +40,8 @@ local function Autocomplete(props)
 		empty = empty,
 		reducedMotion = reducedMotion,
 		size = size,
+		hasError = hasError,
+		helperText = helperText,
 		className = className,
 		sx = sx,
 	}

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -1,3 +1,4 @@
+import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
 import { AvatarVariant } from "./Avatar.styles";
 export interface AvatarProps {
@@ -5,6 +6,7 @@ export interface AvatarProps {
     image?: string;
     size?: number;
     variant?: AvatarVariant;
+    children?: React.ReactNode;
 }
 declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
 export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -16,6 +16,7 @@ local function Avatar(props)
 	if variant == nil then
 		variant = "circular"
 	end
+	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -51,7 +52,13 @@ local function Avatar(props)
 			_attributes_1[_k] = _v
 		end
 		_attributes_1.Image = image
-		_result = (React.createElement("imagelabel", _attributes_1))
+		local _condition_2 = variant ~= "square"
+		if _condition_2 then
+			local _attributes_2 = table.clone(styles.corner)
+			setmetatable(_attributes_2, nil)
+			_condition_2 = React.createElement("uicorner", _attributes_2)
+		end
+		_result = (React.createElement("imagelabel", _attributes_1, _condition_2))
 	else
 		local _attributes_1 = {
 			key = "Initials",
@@ -62,7 +69,7 @@ local function Avatar(props)
 		_attributes_1.Text = avatarInitials(name)
 		_result = (React.createElement("textlabel", _attributes_1))
 	end
-	return React.createElement(SxHost, _attributes, _condition_1, _result)
+	return React.createElement(SxHost, _attributes, _condition_1, _result, children)
 end
 local default = Avatar
 return {

package/out/ui/packages/avatar/components/Avatar.styles.luau

@@ -20,17 +20,24 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 			ClipsDescendants = true,
 		},
 		image = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Crop,
 		},
 		text = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = math.max(12, size * 0.4),
 			TextColor3 = theme.palette.primary.on,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextYAlignment = Enum.TextYAlignment.Center,
 		},
 		corner = {
 			CornerRadius = if variant == "rounded" then UDim.new(0, theme.shape.borderRadius) else UDim.new(1, 0),

package/out/ui/packages/avatarGroup/components/AvatarGroup.luau

@@ -63,7 +63,9 @@ local function AvatarGroup(props)
 			LayoutOrder = index,
 			ZIndex = index + 1,
 		}
-		return React.createElement(Avatar, _attributes_2)
+		local _attributes_3 = table.clone(styles.ring)
+		setmetatable(_attributes_3, nil)
+		return React.createElement(Avatar, _attributes_2, React.createElement("uistroke", _attributes_3))
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)
@@ -87,10 +89,13 @@ local function AvatarGroup(props)
 		else
 			_result_1 = nil
 		end
-		local _attributes_3 = table.clone(styles.surplusText)
+		local _attributes_3 = table.clone(styles.ring)
 		setmetatable(_attributes_3, nil)
-		_attributes_3.Text = `+{extra}`
-		_result = (React.createElement("frame", _attributes_2, _result_1, React.createElement("textlabel", _attributes_3)))
+		local _exp_1 = React.createElement("uistroke", _attributes_3)
+		local _attributes_4 = table.clone(styles.surplusText)
+		setmetatable(_attributes_4, nil)
+		_attributes_4.Text = `+{extra}`
+		_result = (React.createElement("frame", _attributes_2, _result_1, _exp_1, React.createElement("textlabel", _attributes_4)))
 	else
 		_result = nil
 	end

package/out/ui/packages/avatarGroup/components/AvatarGroup.styles.luau

@@ -12,7 +12,7 @@ local useAvatarGroupStyles = componentStyles("AvatarGroup", function(theme, _par
 	if variant == nil then
 		variant = "circular"
 	end
-	local overlap = math.max(theme.padding.calc(1), math.floor(size / 4))
+	local overlap = math.max(theme.padding.calc(1), math.floor(size / 5))
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -39,6 +39,11 @@ local useAvatarGroupStyles = componentStyles("AvatarGroup", function(theme, _par
 			TextSize = math.max(12, size * 0.35),
 			TextColor3 = theme.palette.text.primary,
 		},
+		ring = {
+			Color = theme.palette.surface.canvas,
+			Thickness = 2,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		corner = {
 			CornerRadius = if variant == "rounded" then UDim.new(0, theme.shape.borderRadius) else UDim.new(1, 0),
 		},

package/out/ui/packages/badge/components/Badge.luau

@@ -49,27 +49,30 @@ local function Badge(props)
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _exp = children
+	local _attributes_1 = table.clone(styles.inset)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _exp_1 = children
 	local _condition_1 = shown
 	if _condition_1 then
-		local _attributes_1 = {
+		local _attributes_2 = {
 			key = "Count",
 		}
 		for _k, _v in styles.badge do
-			_attributes_1[_k] = _v
+			_attributes_2[_k] = _v
 		end
-		_attributes_1.Text = if isDot then "" else badgeText(count, max)
+		_attributes_2.Text = if isDot then "" else badgeText(count, max)
 		local _condition_2 = isDot ~= true
 		if _condition_2 then
-			local _attributes_2 = table.clone(styles.padding)
-			setmetatable(_attributes_2, nil)
-			_condition_2 = React.createElement("uipadding", _attributes_2)
+			local _attributes_3 = table.clone(styles.padding)
+			setmetatable(_attributes_3, nil)
+			_condition_2 = React.createElement("uipadding", _attributes_3)
 		end
-		local _attributes_2 = table.clone(styles.corner)
-		setmetatable(_attributes_2, nil)
-		_condition_1 = (React.createElement("textlabel", _attributes_1, _condition_2, React.createElement("uicorner", _attributes_2)))
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = (React.createElement("textlabel", _attributes_2, _condition_2, React.createElement("uicorner", _attributes_3)))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1)
 end
 local default = Badge
 return {