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

package/out/theme/styles/utilities/focusRing.d.ts

@@ -0,0 +1,5 @@
+export declare function focusRing(color: Color3): {
+    Color: Color3;
+    Thickness: number;
+    ApplyStrokeMode: Enum.ApplyStrokeMode.Border;
+};

package/out/theme/styles/utilities/focusRing.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+local function focusRing(color)
+	return {
+		Color = color,
+		Thickness = 2,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+end
+return {
+	focusRing = focusRing,
+}

package/out/theme/styles/utilities/index.d.ts

@@ -3,6 +3,7 @@ export { default as makeStyles } from "./makeStyles";
 export { default as classNames, cx } from "./classNames";
 export { applyVariants, CompoundVariant } from "./variants";
 export { default as componentStyles } from "./componentStyles";
+export { focusRing } from "./focusRing";
 export { resolveResponsive, Responsive } from "../../../hooks/breakpoints";
 export { clearStyleCaches, createStyleCache, styleDepsKey } from "./styleCache";
 export { resolveSx, resolvePaletteToken, PaletteToken, ResolvedSx, SxColor, SxGradient, SxInput } from "./resolveSx";

package/out/theme/styles/utilities/init.luau

@@ -8,6 +8,7 @@ exports.classNames = _classNames.default
 exports.cx = _classNames.cx
 exports.applyVariants = TS.import(script, script, "variants").applyVariants
 exports.componentStyles = TS.import(script, script, "componentStyles").default
+exports.focusRing = TS.import(script, script, "focusRing").focusRing
 exports.resolveResponsive = TS.import(script, script.Parent.Parent.Parent, "hooks", "breakpoints").resolveResponsive
 local _styleCache = TS.import(script, script, "styleCache")
 exports.clearStyleCaches = _styleCache.clearStyleCaches

package/out/theme/styles/utilities/resolveSx.d.ts

@@ -33,10 +33,13 @@ interface SxTheme {
     };
 }
 export type SxColor = PaletteToken | Color3;
-/** Evenly spaced color stops on a UIGradient child. */
+/** Color stops on a UIGradient child. Times default to even spacing. */
 export interface SxGradient {
     colors: SxColor[];
     rotation?: number;
+    times?: number[];
+    transparency?: number | NumberSequence;
+    offset?: Vector2;
 }
 /** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
 export type SxInput = {
@@ -110,6 +113,8 @@ export interface ResolvedSx {
     gradient?: {
         Color: ColorSequence;
         Rotation: number;
+        Transparency?: NumberSequence;
+        Offset?: Vector2;
     };
 }
 /**

package/out/theme/styles/utilities/resolveSx.luau

@@ -108,8 +108,18 @@ local SHORTHAND = {
 	z = true,
 	gradient = true,
 }
---* Evenly spaced color stops on a UIGradient child. 
+--* Color stops on a UIGradient child. Times default to even spacing. 
 --* CSS-like shorthands + pass-through Instance props. No CSS string parser. 
+local function gradientTransparency(value)
+	if value == nil then
+		return nil
+	end
+	local _value = value
+	if type(_value) == "number" then
+		return NumberSequence.new(value)
+	end
+	return value
+end
 local function pick(value, width)
 	if value == nil then
 		return nil
@@ -456,21 +466,46 @@ local function resolveSx(theme, sx, width)
 		end
 		-- ▲ ReadonlyArray.map ▲
 		local stops = _newValue
-		local last = math.max(#stops - 1, 1)
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue_1 = table.create(#stops)
-		local _callback_1 = function(color, index)
-			return ColorSequenceKeypoint.new(if #stops == 1 then 0 else index / last, color)
-		end
-		for _k, _v in stops do
-			_newValue_1[_k] = _callback_1(_v, _k - 1, stops)
+		local count = #stops
+		local last = math.max(count - 1, 1)
+		local times = gradientVal.times
+		local keypoints = {}
+		local previous = 0
+		do
+			local index = 0
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index < count) then
+					break
+				end
+				local time = if count == 1 then 0 else index / last
+				if times ~= nil and count > 1 and times[index + 1] ~= nil then
+					if index == 0 then
+						time = 0
+					elseif index == count - 1 then
+						time = 1
+					else
+						time = math.clamp(times[index + 1], previous, 1)
+					end
+				end
+				if time < previous then
+					time = previous
+				end
+				previous = time
+				local _colorSequenceKeypoint = ColorSequenceKeypoint.new(time, stops[index + 1])
+				table.insert(keypoints, _colorSequenceKeypoint)
+			end
 		end
-		-- ▲ ReadonlyArray.map ▲
-		local keypoints = _newValue_1
-		if #stops == 1 then
+		if count == 1 then
 			local _colorSequenceKeypoint = ColorSequenceKeypoint.new(1, stops[1])
 			table.insert(keypoints, _colorSequenceKeypoint)
 		end
+		local transparency = gradientTransparency(gradientVal.transparency)
 		local _object = {
 			Color = ColorSequence.new(keypoints),
 		}
@@ -481,6 +516,12 @@ local function resolveSx(theme, sx, width)
 		end
 		_object[_left] = _condition_4
 		gradient = _object
+		if transparency ~= nil then
+			gradient.Transparency = transparency
+		end
+		if gradientVal.offset ~= nil then
+			gradient.Offset = gradientVal.offset
+		end
 	end
 	for key, raw in pairs(sx) do
 		local name = key

package/out/ui/packages/accordion/components/Accordion.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
 export interface AccordionProps {
     title: string;
+    note?: string;
     open?: boolean;
     defaultOpen?: boolean;
     disabled?: boolean;

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

@@ -5,6 +5,8 @@ local React = _react
 local useState = _react.useState
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Collapse = TS.import(script, script.Parent.Parent.Parent, "collapse").Collapse
+local accordionNote = TS.import(script, script.Parent, "accordionNote").accordionNote
 local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
 local accordionGlyph = _accordionOpen.accordionGlyph
 local accordionOpen = _accordionOpen.accordionOpen
@@ -12,6 +14,7 @@ local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").
 local function Accordion(props)
 	local _binding = props
 	local title = _binding.title
+	local note = _binding.note
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
 	local disabled = _binding.disabled
@@ -24,6 +27,7 @@ local function Accordion(props)
 	local ref = _binding.ref
 	local localOpen, setLocalOpen = useState(defaultOpen == true)
 	local open = accordionOpen(localOpen, controlled)
+	local summary = accordionNote(note)
 	local styles = useAccordionStyles({
 		open = open,
 		disabled = disabled,
@@ -77,31 +81,63 @@ local function Accordion(props)
 	local _attributes_3 = table.clone(styles.padding)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = React.createElement("uipadding", _attributes_3)
-	local _attributes_4 = {
-		key = "Title",
-	}
-	for _k, _v in styles.title do
-		_attributes_4[_k] = _v
+	local _result
+	if summary == nil then
+		local _attributes_4 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Text = title
+		_result = (React.createElement("textlabel", _attributes_4))
+	else
+		local _attributes_4 = {
+			key = "Copy",
+		}
+		for _k, _v in styles.copy do
+			_attributes_4[_k] = _v
+		end
+		local _exp_2 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		})
+		local _attributes_5 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_5[_k] = _v
+		end
+		_attributes_5.Size = UDim2.new(1, 0, 0, 0)
+		_attributes_5.Text = title
+		_attributes_5.LayoutOrder = 1
+		local _exp_3 = React.createElement("textlabel", _attributes_5)
+		local _attributes_6 = {
+			key = "Note",
+		}
+		for _k, _v in styles.note do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Text = summary
+		_attributes_6.LayoutOrder = 2
+		_result = (React.createElement("frame", _attributes_4, _exp_2, _exp_3, React.createElement("textlabel", _attributes_6)))
 	end
-	_attributes_4.Text = title
-	local _exp_2 = React.createElement("textlabel", _attributes_4)
-	local _attributes_5 = {
+	local _attributes_4 = {
 		key = "Icon",
 	}
 	for _k, _v in styles.icon do
-		_attributes_5[_k] = _v
+		_attributes_4[_k] = _v
 	end
-	_attributes_5.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
-	local _exp_3 = React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, React.createElement("imagelabel", _attributes_5))
-	local _attributes_6 = {
+	_attributes_4.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
+	local _exp_2 = React.createElement("textbutton", _attributes_2, _exp_1, _result, React.createElement("imagelabel", _attributes_4))
+	local _attributes_5 = table.clone(styles.padding)
+	setmetatable(_attributes_5, nil)
+	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_2, React.createElement(Collapse, {
 		key = "Body",
-	}
-	for _k, _v in styles.body do
-		_attributes_6[_k] = _v
-	end
-	local _attributes_7 = table.clone(styles.padding)
-	setmetatable(_attributes_7, nil)
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+		open = open,
+		className = styles.body,
+	}, React.createElement("uipadding", _attributes_5), children))
 end
 local default = Accordion
 return {

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

@@ -4,12 +4,8 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
-	local open = _param.open
-	if open == nil then
-		open = false
-	end
 	local disabled = _param.disabled
-	return createStyles({
+	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
@@ -42,34 +38,58 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
-		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),
-			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,
-		},
-		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)),
-		},
-		body = {
-			LayoutOrder = 2,
+		copy = {
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
+			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Visible = open,
 		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-	})
+	}
+	local _left = "note"
+	local _object_1 = {
+		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
+	end
+	_object_1[_left_1] = _condition
+	_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),
+		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,
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	return createStyles(_object)
 end)
 local default = useAccordionStyles
 return {

package/out/ui/packages/accordion/components/accordionNote.d.ts

@@ -0,0 +1,2 @@
+/** An empty note stays off the header. The body still hides when the panel is shut. */
+export declare function accordionNote(note?: string): string | undefined;

package/out/ui/packages/accordion/components/accordionNote.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty note stays off the header. The body still hides when the panel is shut. 
+local function accordionNote(note)
+	if note == nil or note == "" then
+		return nil
+	end
+	return note
+end
+return {
+	accordionNote = accordionNote,
+}

package/out/ui/packages/alert/components/Alert.d.ts

@@ -5,6 +5,8 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    action?: string;
+    onAction?: () => void;
     filled?: boolean;
     square?: boolean;
 }

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

@@ -3,6 +3,7 @@ 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 alertAction = TS.import(script, script.Parent, "alertAction").alertAction
 local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
 	local _binding = props
@@ -10,6 +11,8 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local filled = _binding.filled
 	local square = _binding.square
 	local className = _binding.className
@@ -17,6 +20,7 @@ local function Alert(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local dismissible = onClose ~= nil
+	local label = alertAction(action)
 	local styles = useAlertStyles({
 		severity = severity,
 		dismissible = dismissible,
@@ -89,7 +93,26 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
+	local _exp_3 = React.createElement("textlabel", _attributes_5)
+	local _condition_4 = label ~= nil
+	if _condition_4 then
+		local _attributes_6 = {
+			key = "Action",
+		}
+		for _k, _v in styles.action do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Text = label
+		_attributes_6.Event = {
+			Activated = function()
+				if onAction then
+					onAction()
+				end
+			end,
+		}
+		_condition_4 = (React.createElement("textbutton", _attributes_6))
+	end
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, _exp_3, _condition_4))
 end
 local default = Alert
 return {

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

@@ -76,6 +76,17 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
+	_object.action = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(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,
+		AutoButtonColor = false,
+		LayoutOrder = 3,
+	}
 	_object.close = {
 		Size = UDim2.fromOffset(closeSize, closeSize),
 		Position = UDim2.new(1, 0, 0, 0),

package/out/ui/packages/alert/components/alertAction.d.ts

@@ -0,0 +1,2 @@
+/** An empty label stays off the banner. */
+export declare function alertAction(label?: string): string | undefined;

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

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

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

@@ -3,6 +3,7 @@ import { CustomizedProps } from "../../../../theme/index";
 import { AppBarColor, AppBarElevation } from "./AppBar.styles";
 export interface AppBarProps {
     title?: string;
+    subtitle?: string;
     elevation?: AppBarElevation;
     color?: AppBarColor;
     children?: React.ReactNode;

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,26 +31,68 @@ 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)
+		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 = 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(0, 0, 0, 0)
+			_attributes_1.AutomaticSize = Enum.AutomaticSize.XY
+			_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, _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
@@ -57,7 +101,7 @@ local function AppBar(props)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
 	local _exp_1 = elevation == "raised" and React.createElement(Shadow)
-	local _result
+	local _result_1
 	if hasActions then
 		local _attributes_2 = table.clone(styles.row)
 		setmetatable(_attributes_2, nil)
@@ -71,16 +115,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)))
 	else
-		_result = titleLabel
+		_result_1 = titleLabel
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
 end
 local default = AppBar
 return {

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

@@ -54,6 +54,30 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	_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/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,
+}