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

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,102 @@
+-- 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,
+		}
+		return React.createElement(Avatar, _attributes_2)
+	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.surplusText)
+		setmetatable(_attributes_3, nil)
+		_attributes_3.Text = `+{extra}`
+		_result = (React.createElement("frame", _attributes_2, _result_1, React.createElement("textlabel", _attributes_3)))
+	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,50 @@
+-- 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 / 4))
+	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,
+		},
+		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/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;

package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau

@@ -5,6 +5,7 @@ local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBottomNavigationStyles = TS.import(script, script.Parent, "BottomNavigation.styles").default
+local navBadge = TS.import(script, script.Parent, "navBadge").navBadge
 local function BottomNavigation(props)
 	local _binding = props
 	local value = _binding.value
@@ -46,6 +47,7 @@ local function BottomNavigation(props)
 	local _callback = function(choice, index)
 		local active = canActivate(disabled or choice.disabled)
 		local selected = choice.value == value
+		local mark = navBadge(choice.badge)
 		local _attributes_2 = {
 			key = `{choice.label}-{index}`,
 		}
@@ -74,7 +76,23 @@ local function BottomNavigation(props)
 			end
 			_condition_1 = React.createElement("frame", _attributes_3)
 		end
-		return React.createElement("textbutton", _attributes_2, _condition_1)
+		local _condition_2 = mark ~= nil
+		if _condition_2 then
+			local _attributes_3 = {
+				key = "Badge",
+			}
+			for _k, _v in styles.badge do
+				_attributes_3[_k] = _v
+			end
+			_attributes_3.Text = mark
+			local _attributes_4 = table.clone(styles.badgePad)
+			setmetatable(_attributes_4, nil)
+			local _exp_1 = React.createElement("uipadding", _attributes_4)
+			local _attributes_5 = table.clone(styles.badgeCorner)
+			setmetatable(_attributes_5, nil)
+			_condition_2 = (React.createElement("textlabel", _attributes_3, _exp_1, React.createElement("uicorner", _attributes_5)))
+		end
+		return React.createElement("textbutton", _attributes_2, _condition_1, _condition_2)
 	end
 	for _k, _v in options do
 		_newValue[_k] = _callback(_v, _k - 1, options)

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.luau

@@ -54,6 +54,26 @@ local useBottomNavigationStyles = componentStyles("BottomNavigation", function(t
 		BackgroundColor3 = theme.palette.primary.main,
 		BorderSizePixel = 0,
 	}
+	_object.badge = {
+		AnchorPoint = Vector2.new(1, 0),
+		Position = UDim2.new(1, -4, 0, 2),
+		AutomaticSize = Enum.AutomaticSize.X,
+		Size = UDim2.fromOffset(0, theme.spacing.calc(2)),
+		BackgroundColor3 = theme.palette.status.error.main,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.caption,
+		TextColor3 = theme.palette.text.inverse,
+		TextXAlignment = Enum.TextXAlignment.Center,
+		ZIndex = 2,
+	}
+	_object.badgePad = {
+		PaddingLeft = UDim.new(0, theme.padding.calc(0.5)),
+		PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
+	}
+	_object.badgeCorner = {
+		CornerRadius = UDim.new(0, theme.spacing.calc(1)),
+	}
 	return createStyles(_object)
 end)
 local default = useBottomNavigationStyles

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

@@ -0,0 +1,2 @@
+/** A missing or empty count stays off the item. Larger counts cap the same way as badgeText. */
+export declare function navBadge(count?: number, max?: number): string | undefined;

package/out/ui/packages/bottomNavigation/components/navBadge.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+--* A missing or empty count stays off the item. Larger counts cap the same way as badgeText. 
+local function navBadge(count, max)
+	if max == nil then
+		max = 99
+	end
+	if count == nil or count <= 0 then
+		return nil
+	end
+	return if count > max then `{max}+` else `{count}`
+end
+return {
+	navBadge = navBadge,
+}

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

@@ -1,2 +1,2 @@
 export { default as BottomNavigation } from "./components/BottomNavigation";
-export { BottomNavigationProps } from "./components/BottomNavigation";
+export { BottomNavigationProps, BottomNavOption } from "./components/BottomNavigation";

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau

@@ -1,9 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local _breadcrumbItems = TS.import(script, script.Parent, "breadcrumbItems")
 local breadcrumbCurrent = _breadcrumbItems.breadcrumbCurrent
+local breadcrumbHasGap = _breadcrumbItems.breadcrumbHasGap
 local breadcrumbVisible = _breadcrumbItems.breadcrumbVisible
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBreadcrumbStyles = TS.import(script, script.Parent, "Breadcrumbs.styles").default
@@ -20,7 +23,9 @@ local function Breadcrumbs(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useBreadcrumbStyles()
-	local visible = breadcrumbVisible(items, maxItems)
+	local opened, setOpened = useState(false)
+	local gap = breadcrumbHasGap(#items, maxItems)
+	local visible = breadcrumbVisible(items, if opened or not gap then nil else maxItems)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -30,11 +35,12 @@ local function Breadcrumbs(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	_attributes.base = if opened then styles.opened else styles.root
 	_attributes.className = className
 	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
+	_attributes_1.Wraps = opened
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#visible)
@@ -51,11 +57,16 @@ local function Breadcrumbs(props)
 		end
 		local _result
 		if entry.ellipsis then
-			local _attributes_2 = table.clone(styles.separator)
+			local _attributes_2 = table.clone(styles.item)
 			setmetatable(_attributes_2, nil)
 			_attributes_2.Text = "…"
 			_attributes_2.LayoutOrder = order * 2 + 1
-			_result = (React.createElement("textlabel", _attributes_2))
+			_attributes_2.Event = {
+				Activated = function()
+					return setOpened(true)
+				end,
+			}
+			_result = (React.createElement("textbutton", _attributes_2))
 		else
 			local _attributes_2 = table.clone(cx(styles.item, current and styles.current))
 			setmetatable(_attributes_2, nil)

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.styles.luau

@@ -11,6 +11,12 @@ local useBreadcrumbStyles = componentStyles("Breadcrumbs", function(theme)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
+		opened = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		list = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/ui/packages/breadcrumbs/components/breadcrumbItems.d.ts

@@ -4,6 +4,8 @@ export interface BreadcrumbSlice {
     index: number;
     ellipsis?: boolean;
 }
+/** True when a middle gap is shown. A max of one item has no gap to open. */
+export declare function breadcrumbHasGap(count: number, maxItems?: number): boolean;
 /** Collapse middle items when over maxItems (keep ends). */
 export declare function breadcrumbVisible<T extends {
     label: string;

package/out/ui/packages/breadcrumbs/components/breadcrumbItems.luau

@@ -2,6 +2,13 @@
 local function breadcrumbCurrent(index, count)
 	return count > 0 and index == count - 1
 end
+--* True when a middle gap is shown. A max of one item has no gap to open. 
+local function breadcrumbHasGap(count, maxItems)
+	if maxItems == nil or maxItems <= 1 then
+		return false
+	end
+	return count > maxItems
+end
 --* Collapse middle items when over maxItems (keep ends). 
 local function breadcrumbVisible(items, maxItems)
 	local count = #items
@@ -71,5 +78,6 @@ local function breadcrumbVisible(items, maxItems)
 end
 return {
 	breadcrumbCurrent = breadcrumbCurrent,
+	breadcrumbHasGap = breadcrumbHasGap,
 	breadcrumbVisible = breadcrumbVisible,
 }

package/out/ui/packages/button/components/Button.d.ts

@@ -1,4 +1,5 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types/index";
 import { LoadingPosition } from "./buttonLook";
 export type DefaultButtonComponent = TextButton;
@@ -8,6 +9,7 @@ export interface ButtonProps {
     color?: ButtonColor;
     fullWidth?: boolean;
     variant?: ButtonVariant;
+    icon?: Icons;
     disabled?: boolean;
     loading?: boolean;
     loadingLabel?: string;

package/out/ui/packages/button/components/Button.luau

@@ -5,13 +5,16 @@ local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local LoadingStroke = TS.import(script, script.Parent.Parent.Parent, "loadingStroke").LoadingStroke
 local canActivate = TS.import(script, script.Parent, "activation").canActivate
 local _buttonLook = TS.import(script, script.Parent, "buttonLook")
 local buttonFace = _buttonLook.buttonFace
+local buttonIcon = _buttonLook.buttonIcon
 local spinnerPixels = _buttonLook.spinnerPixels
 local spinnerPlace = _buttonLook.spinnerPlace
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
@@ -25,6 +28,7 @@ local function Button(props)
 	if variant == nil then
 		variant = "contained"
 	end
+	local icon = _binding.icon
 	local disabled = _binding.disabled
 	if disabled == nil then
 		disabled = false
@@ -69,8 +73,12 @@ local function Button(props)
 	local font = _binding_1.font
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
+	local focus = _binding_1.focus
 	local _binding_2 = useTheme()
 	local theme = _binding_2.theme
+	local metrics = controlMetrics(theme.density, props.size)
+	local glyph = buttonIcon(icon, loading)
+	local grow = glyph ~= nil and props.fullWidth ~= true
 	local reducedMotion = useReducedMotion(reducedProp)
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
@@ -115,12 +123,18 @@ local function Button(props)
 	_attributes.Active = active
 	_attributes.AutoButtonColor = active
 	_attributes.Selectable = active
-	_attributes.Text = face.text
-	for _k, _v in (if face.hideText then {
+	_attributes.Text = if glyph ~= nil then "" else face.text
+	for _k, _v in (if glyph ~= nil then {} elseif face.hideText then {
 		TextTransparency = 1,
 	} else {}) do
 		_attributes[_k] = _v
 	end
+	for _k, _v in (if grow then {
+		AutomaticSize = Enum.AutomaticSize.X,
+		Size = UDim2.new(0, 0, 0, metrics.buttonHeight),
+	} else {}) do
+		_attributes[_k] = _v
+	end
 	local _result
 	if pressed then
 		_result = 0.75
@@ -191,23 +205,29 @@ local function Button(props)
 			end
 		end,
 	}
-	local _condition_1 = variant == "outlined" and not busy
+	local _condition_1 = not busy and focused
 	if _condition_1 then
-		local _attributes_1 = table.clone(stroke)
+		local _attributes_1 = table.clone(focus)
 		setmetatable(_attributes_1, nil)
 		_condition_1 = React.createElement("uistroke", _attributes_1)
 	end
+	local _condition_2 = not busy and not focused and variant == "outlined"
+	if _condition_2 then
+		local _attributes_1 = table.clone(stroke)
+		setmetatable(_attributes_1, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_1)
+	end
 	local _exp = busy and React.createElement(LoadingStroke, {
 		animating = busy and not reducedMotion,
 		color = spinnerColor,
 	})
-	local _condition_2 = rounded
-	if _condition_2 then
+	local _condition_3 = rounded
+	if _condition_3 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
-		_condition_2 = React.createElement("uicorner", _attributes_1)
+		_condition_3 = React.createElement("uicorner", _attributes_1)
 	end
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _condition_2, loading and (React.createElement(CircularProgress, {
+	return React.createElement(SxHost, _attributes, _condition_1, _condition_2, _exp, _condition_3, loading and (React.createElement(CircularProgress, {
 		size = spinnerPixels(props.size),
 		thickness = 2,
 		color = spinnerColor,
@@ -217,7 +237,36 @@ local function Button(props)
 			Position = UDim2.new(place.xScale, place.xOffset, 0.5, 0),
 			ZIndex = 10001,
 		},
-	})), children)
+	})), glyph ~= nil and (React.createElement(React.Fragment, nil, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+		PaddingRight = UDim.new(0, theme.padding.calc(2)),
+	}), React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, theme.padding.calc(1)),
+	}), React.createElement("imagelabel", {
+		key = "Icon",
+		LayoutOrder = 1,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ScaleType = Enum.ScaleType.Fit,
+		Image = glyph,
+		ImageColor3 = spinnerColor,
+		Size = UDim2.fromOffset(metrics.icon, metrics.icon),
+	}), React.createElement("textlabel", {
+		key = "Label",
+		LayoutOrder = 2,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		Font = theme.typography.fontFamilies.default,
+		TextSize = metrics.font,
+		TextColor3 = spinnerColor,
+		Text = face.text,
+	}))), children)
 end
 local default = Button
 return {

package/out/ui/packages/button/components/Button.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
 local makeRootStyles = function(theme, _param)
 	local size = _param.size
 	local color = _param.color
@@ -121,6 +122,7 @@ local useButtonStyles = componentStyles("Button", function(theme, _param)
 			Transparency = 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		focus = focusRing(theme.palette.focus),
 	})
 end)
 local default = useButtonStyles

package/out/ui/packages/button/components/buttonLook.d.ts

@@ -8,5 +8,7 @@ export declare function spinnerPlace(position?: LoadingPosition): {
     xOffset: number;
     anchorX: number;
 };
+/** An empty glyph stays off the button. Loading keeps the spinner path. */
+export declare function buttonIcon(icon?: string, loading?: boolean): string | undefined;
 export declare function spinnerPixels(size?: "small" | "medium" | "large"): 16 | 14 | 12;
 export declare function iconSpinnerPixels(size?: string): 16 | 12 | 8;

package/out/ui/packages/button/components/buttonLook.luau

@@ -29,6 +29,16 @@ local function spinnerPlace(position)
 		anchorX = 0.5,
 	}
 end
+--* An empty glyph stays off the button. Loading keeps the spinner path. 
+local function buttonIcon(icon, loading)
+	if loading == true then
+		return nil
+	end
+	if icon == nil or icon == "" then
+		return nil
+	end
+	return icon
+end
 local function spinnerPixels(size)
 	if size == "large" then
 		return 16
@@ -50,6 +60,7 @@ end
 return {
 	buttonFace = buttonFace,
 	spinnerPlace = spinnerPlace,
+	buttonIcon = buttonIcon,
 	spinnerPixels = spinnerPixels,
 	iconSpinnerPixels = iconSpinnerPixels,
 }

package/out/ui/packages/buttonGroup/components/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+export interface ButtonGroupItem {
+    label: string;
+    disabled?: boolean;
+}
+export interface ButtonGroupProps {
+    items: ButtonGroupItem[];
+    onItem?: (index: number) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+}
+declare function ButtonGroup(props: CustomizedProps<Frame, ButtonGroupProps>): JSX.Element;
+export default ButtonGroup;