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

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

@@ -3,6 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local appBarSubtitle = TS.import(script, script.Parent, "appBarSubtitle").appBarSubtitle
 local useAppBarStyles = TS.import(script, script.Parent, "AppBar.styles").default
 local function AppBar(props)
 	local _binding = props
@@ -10,6 +11,7 @@ local function AppBar(props)
 	if title == nil then
 		title = ""
 	end
+	local subtitle = _binding.subtitle
 	local elevation = _binding.elevation
 	if elevation == nil then
 		elevation = "raised"
@@ -29,40 +31,104 @@ local function AppBar(props)
 		color = color,
 		hasActions = hasActions,
 	})
-	local _condition = title ~= ""
-	if _condition then
+	local line = appBarSubtitle(subtitle)
+	local _result
+	if line == nil then
+		local _condition = title ~= ""
+		if _condition then
+			local _attributes = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes[_k] = _v
+			end
+			_attributes.Text = title
+			_condition = (React.createElement("textlabel", _attributes, hasActions and React.createElement("uiflexitem", {
+				key = "Flex",
+				FlexMode = Enum.UIFlexMode.Fill,
+			})))
+		end
+		_result = _condition
+	else
 		local _attributes = {
-			key = "Title",
+			key = "Titles",
 		}
-		for _k, _v in styles.title do
+		for _k, _v in styles.titles do
 			_attributes[_k] = _v
 		end
-		_attributes.Text = title
-		_condition = React.createElement("textlabel", _attributes)
+		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,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		})
+		local _condition = title ~= ""
+		if _condition then
+			local _attributes_1 = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes_1[_k] = _v
+			end
+			_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))
+		end
+		local _attributes_1 = {
+			key = "Subtitle",
+		}
+		for _k, _v in styles.subtitle do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Text = line
+		_attributes_1.LayoutOrder = 2
+		_result = (React.createElement("frame", _attributes, _exp, _exp_1, _condition, React.createElement("textlabel", _attributes_1)))
 	end
-	local titleLabel = _condition
+	local titleLabel = _result
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition_1 = id
-	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-		_condition_1 = "AppBar"
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "AppBar"
 	end
-	_attributes.key = _condition_1
+	_attributes.key = _condition
 	_attributes.hostRef = ref
 	_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 _result
+	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",
 		}
@@ -71,16 +137,16 @@ local function AppBar(props)
 		end
 		local _attributes_4 = table.clone(styles.actionsLayout)
 		setmetatable(_attributes_4, nil)
-		_result = (React.createElement("frame", {
+		_result_1 = (React.createElement("frame", {
 			key = "Row",
 			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 = titleLabel
+		_result_1 = titleLabel
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result)
+	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,26 +44,45 @@ 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.actions = {
 		LayoutOrder = 2,

package/out/ui/packages/appBar/components/appBarSubtitle.d.ts

@@ -0,0 +1,2 @@
+/** An empty second line stays off the bar. */
+export declare function appBarSubtitle(text?: string): string | undefined;

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

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty second line stays off the bar. 
+local function appBarSubtitle(text)
+	if text == nil or text == "" then
+		return nil
+	end
+	return text
+end
+return {
+	appBarSubtitle = appBarSubtitle,
+}

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.d.ts

@@ -0,0 +1,14 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { AvatarVariant } from "../../avatar/components/Avatar.styles";
+export interface AvatarGroupEntry {
+    name?: string;
+    image?: string;
+}
+export interface AvatarGroupProps {
+    items: AvatarGroupEntry[];
+    max?: number;
+    size?: number;
+    variant?: AvatarVariant;
+}
+declare function AvatarGroup(props: CustomizedProps<Frame, AvatarGroupProps>): JSX.Element;
+export default AvatarGroup;

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

@@ -0,0 +1,107 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Avatar = TS.import(script, script.Parent.Parent.Parent, "avatar").Avatar
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local avatarGroupCut = TS.import(script, script.Parent, "avatarGroupCut").avatarGroupCut
+local useAvatarGroupStyles = TS.import(script, script.Parent, "AvatarGroup.styles").default
+local function AvatarGroup(props)
+	local _binding = props
+	local items = _binding.items
+	local max = _binding.max
+	local size = _binding.size
+	if size == nil then
+		size = 40
+	end
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "circular"
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAvatarGroupStyles({
+		size = size,
+		variant = variant,
+	})
+	local count = #items
+	local shown = avatarGroupCut(count, max)
+	local extra = count - shown
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "AvatarGroup"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(entry, index)
+		if index >= shown then
+			return nil
+		end
+		local _attributes_2 = {}
+		local _condition_1 = entry.name
+		if _condition_1 == nil then
+			_condition_1 = "face"
+		end
+		_attributes_2.key = `{_condition_1}-{index}`
+		_attributes_2.name = entry.name
+		_attributes_2.image = entry.image
+		_attributes_2.size = size
+		_attributes_2.variant = variant
+		_attributes_2.className = {
+			LayoutOrder = index,
+			ZIndex = index + 1,
+		}
+		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)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _result
+	if extra > 0 then
+		local _attributes_2 = {
+			key = "Extra",
+		}
+		for _k, _v in styles.surplus do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = shown
+		_attributes_2.ZIndex = shown + 1
+		local _result_1
+		if variant ~= "square" then
+			local _attributes_3 = table.clone(styles.corner)
+			setmetatable(_attributes_3, nil)
+			_result_1 = React.createElement("uicorner", _attributes_3)
+		else
+			_result_1 = nil
+		end
+		local _attributes_3 = table.clone(styles.ring)
+		setmetatable(_attributes_3, nil)
+		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
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue, _result))
+end
+local default = AvatarGroup
+return {
+	default = default,
+}

package/out/ui/packages/avatarGroup/components/AvatarGroup.styles.d.ts

@@ -0,0 +1,6 @@
+import { AvatarVariant } from "../../avatar/components/Avatar.styles";
+declare const useAvatarGroupStyles: (props: {
+    size?: number;
+    variant?: AvatarVariant;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useAvatarGroupStyles;

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

@@ -0,0 +1,55 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useAvatarGroupStyles = componentStyles("AvatarGroup", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = 40
+	end
+	local variant = _param.variant
+	if variant == nil then
+		variant = "circular"
+	end
+	local overlap = math.max(theme.padding.calc(1), math.floor(size / 5))
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, -overlap),
+		},
+		surplus = {
+			Size = UDim2.fromOffset(size, size),
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BorderSizePixel = 0,
+		},
+		surplusText = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			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),
+		},
+	})
+end)
+local default = useAvatarGroupStyles
+return {
+	default = default,
+}

package/out/ui/packages/avatarGroup/components/avatarGroupCut.d.ts

@@ -0,0 +1,2 @@
+/** Faces drawn before a surplus badge. A max below 2, or a short list, shows every face. */
+export declare function avatarGroupCut(count: number, max?: number): number;

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

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Faces drawn before a surplus badge. A max below 2, or a short list, shows every face. 
+local function avatarGroupCut(count, max)
+	if max == nil or max ~= max or max < 2 or count <= max then
+		return count
+	end
+	return max - 1
+end
+return {
+	avatarGroupCut = avatarGroupCut,
+}

package/out/ui/packages/avatarGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AvatarGroup } from "./components/AvatarGroup";
+export { AvatarGroupEntry, AvatarGroupProps } from "./components/AvatarGroup";
+export { avatarGroupCut } from "./components/avatarGroupCut";

package/out/ui/packages/avatarGroup/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.AvatarGroup = TS.import(script, script, "components", "AvatarGroup").default
+exports.avatarGroupCut = TS.import(script, script, "components", "avatarGroupCut").avatarGroupCut
+return exports

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 {

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

@@ -30,11 +30,15 @@ local useBadgeStyles = componentStyles("Badge", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = if color == "error" then theme.palette.text.inverse else tone.on,
+			TextColor3 = tone.on,
 			TextXAlignment = Enum.TextXAlignment.Center,
 			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,
 		},
+		inset = {
+			PaddingTop = UDim.new(0, diameter / 2),
+			PaddingRight = UDim.new(0, diameter / 2),
+		},
 		padding = {
 			PaddingLeft = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),
 			PaddingRight = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),

package/out/ui/packages/bottomNavigation/components/BottomNavigation.d.ts

@@ -1,8 +1,11 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
+export interface BottomNavOption<T> extends ChoiceOption<T> {
+    badge?: number;
+}
 export interface BottomNavigationProps<T> {
     value: T;
-    options: ChoiceOption<T>[];
+    options: BottomNavOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
     showLabels?: boolean;