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

package/out/ui/packages/timeline/components/Timeline.styles.luau

@@ -6,21 +6,26 @@ local createStyles = _theme.createStyles
 local useTimelineStyles = componentStyles("Timeline", function(theme)
 	local dot = theme.spacing.calc(1.5)
 	local rail = theme.spacing.calc(2)
+	local pad = theme.padding.calc(1)
 	return createStyles({
 		root = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
+		inset = {
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
+		},
 		list = {
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, 0),
 		},
 		item = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -pad * 2, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -65,8 +70,8 @@ local useTimelineStyles = componentStyles("Timeline", function(theme)
 		},
 		body = {
 			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -(rail + theme.spacing.calc(1)), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -79,24 +84,28 @@ local useTimelineStyles = componentStyles("Timeline", function(theme)
 			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 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 		},
 		caption = {
-			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.caption,
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 		},
 	})
 end)

package/out/ui/packages/toast/components/Toast.luau

@@ -1,20 +1,32 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local BoatTween = TS.import(script, TS.getModule(script, "@rbxts", "boat-tween").src).BoatTween
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
-local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
-local DEFAULT_THEME = _theme.DEFAULT_THEME
-local useTheme = _theme.useTheme
-local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Directions
+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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
+local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
+local motionDuration = TS.import(script, script.Parent.Parent.Parent, "motion", "duration").motionDuration
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local useToastStyles = TS.import(script, script.Parent, "Toast.styles").default
-local toastWrap = TS.import(script, script.Parent, "toastPlace").toastWrap
-local TWEEN_DURATION = 0.5
+local _toastPlace = TS.import(script, script.Parent, "toastPlace")
+local toastGlyph = _toastPlace.toastGlyph
+local toastHold = _toastPlace.toastHold
+local toastWrap = _toastPlace.toastWrap
+local function withoutPosition(style)
+	local body = {}
+	for key, value in pairs(style) do
+		if key ~= "Position" then
+			body[key] = value
+		end
+	end
+	return body
+end
 local function Toast(props)
 	local _binding = props
 	local text = _binding.text
@@ -25,6 +37,7 @@ local function Toast(props)
 	end
 	local action = _binding.action
 	local onAction = _binding.onAction
+	local toggledAt = _binding.toggledAt
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -33,88 +46,166 @@ local function Toast(props)
 	local container = _binding_1.container
 	local label = _binding_1.label
 	local close = _binding_1.close
+	local closeGlyph = _binding_1.closeGlyph
+	local mark = _binding_1.mark
 	local actionStyle = _binding_1.action
 	local activePosition = _binding_1.activePosition
 	local inActivePosition = _binding_1.inActivePosition
 	local _binding_2 = useTheme()
 	local theme = _binding_2.theme
+	local reduced = useReducedMotion()
 	local frameRef = useRef()
+	local dismiss = useRef(onDismiss)
+	dismiss.current = onDismiss
+	local timer = useRef()
+	local exitTimer = useRef()
+	local stopMotion = useRef(function() end)
+	local leaving = useRef(false)
 	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
 	local _condition = theme.typography.fontSizes.body
 	if _condition == nil then
 		_condition = 14
 	end
 	local textSize = _condition
-	local actionSlot = if action ~= nil and #action > 0 then theme.spacing.calc(8) else 0
-	local box = theme.spacing.calc(20) - theme.padding.calc(4) - actionSlot
+	local glyph = toastGlyph(props.variant)
+	local _exp = (if action ~= nil and #action > 0 then theme.spacing.calc(8) else 0)
+	local _condition_1 = theme.typography.fontSizes.caption
+	if _condition_1 == nil then
+		_condition_1 = 12
+	end
+	local actionSlot = _exp + _condition_1 + theme.padding.calc(1)
+	local _result = closeGlyph.Size
+	if _result ~= nil then
+		_result = _result.X.Offset
+	end
+	local _condition_2 = _result
+	if _condition_2 == nil then
+		_condition_2 = 16
+	end
+	local iconSize = _condition_2
+	local lead = if glyph ~= nil then iconSize + theme.padding.calc(1) else 0
+	local box = theme.spacing.calc(20) - theme.padding.calc(4) - actionSlot - lead
 	local bounds = TextService:GetTextSize(text, textSize, font, Vector2.new(10000, 100))
 	local wrap = toastWrap(bounds.X, box)
 	local pad = theme.padding.calc(2)
-	local _result
+	local _result_1
 	if wrap then
 		local _object = table.clone(container)
 		setmetatable(_object, nil)
 		_object.AutomaticSize = Enum.AutomaticSize.Y
-		_result = _object
+		_result_1 = _object
 	else
-		_result = container
+		_result_1 = container
 	end
-	local boxStyle = _result
-	local _result_1
+	local boxStyle = _result_1
+	local _result_2
 	if wrap then
 		local _object = table.clone(label)
 		setmetatable(_object, nil)
 		_object.TextWrapped = true
 		_object.TextTruncate = Enum.TextTruncate.None
 		_object.AutomaticSize = Enum.AutomaticSize.Y
-		_object.Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 0, 0)
+		_object.Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot + lead), 0, 0)
 		_object.AnchorPoint = Vector2.new(0, 0)
-		_object.Position = UDim2.new(0, pad, 0, pad)
+		_object.Position = UDim2.new(0, pad + lead, 0, pad)
 		_object.TextXAlignment = Enum.TextXAlignment.Left
 		_object.TextYAlignment = Enum.TextYAlignment.Top
-		_result_1 = _object
+		_result_2 = _object
 	else
-		_result_1 = label
+		_result_2 = label
 	end
-	local labelStyle = _result_1
-	local tween = function(direction)
-		local frame = frameRef.current
-		if not frame then
+	local labelStyle = _result_2
+	local active = activePosition.Position
+	local idle = inActivePosition.Position
+	local clock = useRef({
+		active = active,
+		idle = idle,
+		enter = theme.motion.slow,
+		exit = theme.motion.default,
+		reduced = reduced,
+		duration = duration,
+	})
+	clock.current = {
+		active = active,
+		idle = idle,
+		enter = theme.motion.slow,
+		exit = theme.motion.default,
+		reduced = reduced,
+		duration = duration,
+	}
+	local leave = function()
+		if leaving.current then
 			return nil
 		end
-		local tween = BoatTween:Create(frame, {
-			Time = TWEEN_DURATION,
-			DelayTime = 0,
-			EasingStyle = "Linear",
-			EasingDirection = "InOut",
-			RepeatCount = 0,
-			Reverses = false,
-			StepType = "Stepped",
-			Goal = {
-				Position = if direction == Directions.In then activePosition.Position else inActivePosition.Position,
-			},
-		})
-		tween:Play()
-		wait(TWEEN_DURATION)
+		leaving.current = true
+		if timer.current then
+			task.cancel(timer.current)
+			timer.current = nil
+		end
+		stopMotion.current()
+		local frame = frameRef.current
+		local now = clock.current
+		if frame and now.idle then
+			stopMotion.current = playProperty(frame, {
+				Position = now.idle,
+				GroupTransparency = 1,
+			}, now.exit, now.reduced)
+		end
+		exitTimer.current = task.delay(motionDuration(now.exit, now.reduced), function()
+			exitTimer.current = nil
+			dismiss.current()
+		end)
 	end
 	useEffect(function()
-		tween(Directions.In)
-		wait(duration)
-		tween(Directions.Out)
-		if onDismiss then
-			onDismiss()
+		local frame = frameRef.current
+		if not frame then
+			return nil
 		end
-	end, {})
+		leaving.current = false
+		local now = clock.current
+		if now.idle then
+			frame.Position = now.idle
+		end
+		frame.GroupTransparency = 1
+		stopMotion.current()
+		if now.active then
+			stopMotion.current = playProperty(frame, {
+				Position = now.active,
+				GroupTransparency = 0,
+			}, now.enter, now.reduced)
+		end
+		local hold = task.delay(toastHold(now.enter, now.duration, now.reduced), function()
+			timer.current = nil
+			leave()
+		end)
+		timer.current = hold
+		return function()
+			if timer.current == hold then
+				task.cancel(hold)
+			end
+			if exitTimer.current then
+				task.cancel(exitTimer.current)
+			end
+			exitTimer.current = nil
+			stopMotion.current()
+		end
+	end, { duration, text, toggledAt, reduced })
 	local _attributes = {
-		tag = "frame",
+		tag = "canvasgroup",
 	}
-	local _condition_1 = id
-	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-		_condition_1 = "Toast"
+	local _condition_3 = id
+	if not (_condition_3 ~= 0 and _condition_3 == _condition_3 and _condition_3 ~= "" and _condition_3) then
+		_condition_3 = "Toast"
 	end
-	_attributes.key = _condition_1
+	_attributes.key = _condition_3
 	_attributes.hostRef = function(instance)
 		frameRef.current = instance
+		if instance and clock.current.idle then
+			instance.Position = clock.current.idle
+		end
+		if instance then
+			instance.GroupTransparency = 1
+		end
 		if ref == nil then
 			return nil
 		end
@@ -124,17 +215,23 @@ local function Toast(props)
 		end
 		ref.current = instance
 	end
-	_attributes.base = boxStyle
+	_attributes.base = withoutPosition(boxStyle)
 	_attributes.className = className
 	_attributes.sx = sx
-	local _exp = React.createElement("uicorner", {
+	local _exp_1 = React.createElement("uicorner", {
 		key = "Corner",
-		CornerRadius = UDim.new(0, DEFAULT_THEME.shape.borderRadius),
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
 	})
-	local _exp_1 = React.createElement(Shadow)
-	local _exp_2 = wrap and React.createElement("uipadding", {
+	local _exp_2 = React.createElement(Shadow)
+	local _exp_3 = wrap and React.createElement("uipadding", {
 		PaddingBottom = UDim.new(0, pad),
 	})
+	local _exp_4 = glyph ~= nil and (React.createElement(Icon, {
+		glyph = glyph,
+		size = iconSize,
+		tint = closeGlyph.ImageColor3,
+		className = mark,
+	}))
 	local _attributes_1 = {
 		key = "Label",
 	}
@@ -142,9 +239,9 @@ local function Toast(props)
 		_attributes_1[_k] = _v
 	end
 	_attributes_1.Text = text
-	local _exp_3 = React.createElement("textlabel", _attributes_1)
-	local _condition_2 = action ~= nil and #action > 0
-	if _condition_2 then
+	local _exp_5 = React.createElement("textlabel", _attributes_1)
+	local _condition_4 = action ~= nil and #action > 0
+	if _condition_4 then
 		local _attributes_2 = {
 			key = "Action",
 		}
@@ -157,29 +254,28 @@ local function Toast(props)
 				if onAction then
 					onAction()
 				end
-				tween(Directions.Out)
-				if onDismiss then
-					onDismiss()
-				end
+				leave()
 			end,
 		}
-		_condition_2 = (React.createElement("textbutton", _attributes_2))
+		_condition_4 = (React.createElement("textbutton", _attributes_2))
 	end
 	local _attributes_2 = {
-		key = "Close",
+		id = "Close",
+		glyph = "close",
 	}
-	for _k, _v in close do
-		_attributes_2[_k] = _v
+	local _result_3 = closeGlyph.Size
+	if _result_3 ~= nil then
+		_result_3 = _result_3.X.Offset
 	end
-	_attributes_2.Event = {
-		MouseButton1Click = function()
-			tween(Directions.Out)
-			if onDismiss then
-				onDismiss()
-			end
-		end,
-	}
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_2, React.createElement("imagebutton", _attributes_2))
+	local _condition_5 = _result_3
+	if _condition_5 == nil then
+		_condition_5 = 16
+	end
+	_attributes_2.iconSize = _condition_5
+	_attributes_2.tint = closeGlyph.ImageColor3
+	_attributes_2.className = close
+	_attributes_2.onClick = leave
+	return React.createElement(SxHost, _attributes, _exp_1, _exp_2, _exp_3, _exp_4, _exp_5, _condition_4, React.createElement(IconButton, _attributes_2))
 end
 local default = Toast
 return {

package/out/ui/packages/toast/components/Toast.styles.luau

@@ -3,10 +3,11 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
-local DEFAULT_THEME = _theme.DEFAULT_THEME
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local controlMetrics = _theme.controlMetrics
 local ToastVariants = TS.import(script, script.Parent.Parent, "enums", "ToastVariants").default
-local toastPlace = TS.import(script, script.Parent, "toastPlace").toastPlace
+local _toastPlace = TS.import(script, script.Parent, "toastPlace")
+local toastGlyph = _toastPlace.toastGlyph
+local toastPlace = _toastPlace.toastPlace
 local useToastStyles = componentStyles("Toast", function(theme, _param)
 	local variant = _param.variant
 	if variant == nil then
@@ -34,6 +35,12 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 					content = theme.palette.status.warning.on,
 				}
 			end
+			if variant == (ToastVariants.info) then
+				return {
+					background = theme.palette.status.info.main,
+					content = theme.palette.status.info.on,
+				}
+			end
 			return {
 				background = theme.palette.surface.overlay,
 				content = theme.palette.text.primary,
@@ -42,8 +49,13 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 	end
 	local toastColors = getToastColors()
 	local hasAction = action ~= nil and #action > 0
-	local actionSlot = if hasAction then theme.spacing.calc(8) else 0
-	local place = toastPlace(edge, DEFAULT_THEME.padding.calc(2), DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
+	local glyph = controlMetrics(theme.density).icon
+	local hit = glyph + theme.padding.calc(2)
+	local marked = toastGlyph(variant) ~= nil
+	local lead = if marked then glyph + theme.padding.calc(1) else 0
+	local pinLeft = hasAction or marked
+	local actionSlot = (if hasAction then theme.spacing.calc(8) else 0) + hit
+	local place = toastPlace(edge, theme.padding.calc(2), theme.spacing.calc(20) + theme.padding.calc(2))
 	local ACTIVE_POSITION = UDim2.new(0.5, 0, place.activeY, place.activeOffset)
 	local INACTIVE_POSITION = UDim2.new(0.5, 0, place.idleY, place.idleOffset)
 	return createStyles({
@@ -56,23 +68,24 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50000,
 		},
 		label = {
-			Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 1, -theme.padding.calc(4)),
-			Position = if hasAction then UDim2.new(0, theme.padding.calc(2), 0.5, 0) else UDim2.new(0.5, 0, 0.5, 0),
-			AnchorPoint = if hasAction then Vector2.new(0, 0.5) else Vector2.new(0.5, 0.5),
+			Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot + lead), 1, -theme.padding.calc(4)),
+			Position = if pinLeft then UDim2.new(0, theme.padding.calc(2) + lead, 0.5, 0) else UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = if pinLeft then Vector2.new(0, 0.5) else Vector2.new(0.5, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = toastColors.content,
 			Font = theme.typography.fontFamilies.default,
-			TextXAlignment = if hasAction then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
-			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextXAlignment = if pinLeft then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
+			TextWrapped = true,
+			TextTruncate = Enum.TextTruncate.None,
 			TextScaled = false,
 			ZIndex = 50001,
 		},
 		action = {
 			AutomaticSize = Enum.AutomaticSize.X,
 			Size = UDim2.new(0, 0, 0, theme.spacing.calc(3)),
-			Position = UDim2.new(1, -(theme.padding.calc(2) + theme.options.constants.iconSizes.small + theme.padding.calc(1)), 0.5, 0),
+			Position = UDim2.new(1, -(theme.padding.calc(1) + hit), 0.5, 0),
 			AnchorPoint = Vector2.new(1, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
@@ -83,17 +96,21 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50001,
 		},
 		close = {
-			Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
-			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
-			AnchorPoint = Vector2.new(1, 0),
-			ImageColor3 = toastColors.content,
-			Image = Icons.Close,
+			Size = UDim2.fromOffset(hit, hit),
+			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			ZIndex = 50001,
+		},
+		mark = {
+			Position = UDim2.new(0, theme.padding.calc(2), 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
 			BackgroundTransparency = 1,
-			AutoButtonColor = false,
-			BorderSizePixel = 0,
-			Active = true,
 			ZIndex = 50001,
 		},
+		closeGlyph = {
+			Size = UDim2.fromOffset(glyph, glyph),
+			ImageColor3 = toastColors.content,
+		},
 		activePosition = {
 			Position = ACTIVE_POSITION,
 		},

package/out/ui/packages/toast/components/toastPlace.d.ts

@@ -10,3 +10,7 @@ export interface ToastPlace {
 export declare function toastPlace(edge: ToastEdge | undefined, inset: number, hidden: number): ToastPlace;
 /** A line wider than the toast wraps. A short line stays one row. */
 export declare function toastWrap(textWidth: number, box: number): boolean;
+export type ToastGlyph = "success" | "error" | "warning" | "info";
+export declare function toastGlyph(variant?: string): ToastGlyph | undefined;
+/** Enter slide, then the visible duration. Reduced motion skips the slide. */
+export declare function toastHold(enter: number, visible: number, reduced?: boolean): number;

package/out/ui/packages/toast/components/toastPlace.luau

@@ -25,7 +25,20 @@ local function toastWrap(textWidth, box)
 	end
 	return textWidth > box
 end
+local function toastGlyph(variant)
+	if variant == "success" or variant == "error" or variant == "warning" or variant == "info" then
+		return variant
+	end
+	return nil
+end
+--* Enter slide, then the visible duration. Reduced motion skips the slide. 
+local function toastHold(enter, visible, reduced)
+	local slide = if reduced == true then 0 else enter
+	return slide + visible
+end
 return {
 	toastPlace = toastPlace,
 	toastWrap = toastWrap,
+	toastGlyph = toastGlyph,
+	toastHold = toastHold,
 }

package/out/ui/packages/toast/enums/ToastVariants.d.ts

@@ -2,6 +2,7 @@ declare enum ToastVariants {
     default = "default",
     success = "success",
     error = "error",
-    warning = "warning"
+    warning = "warning",
+    info = "info"
 }
 export default ToastVariants;

package/out/ui/packages/toast/enums/ToastVariants.luau

@@ -4,6 +4,7 @@ local ToastVariants = {
 	success = "success",
 	error = "error",
 	warning = "warning",
+	info = "info",
 }
 local default = ToastVariants
 return {

package/out/ui/packages/toggleButton/components/ToggleButton.luau

@@ -1,6 +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 _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local focusRing = _theme.focusRing
+local useTheme = _theme.useTheme
 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 useToggleButtonStyles = TS.import(script, script.Parent, "ToggleButton.styles").default
@@ -23,7 +29,12 @@ local function ToggleButton(props)
 		disabled = disabled,
 		size = size,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local active = canActivate(disabled)
+	local hovering, setHovering = useState(false)
+	local focused, setFocused = useState(false)
+	local face = if selected == true then theme.palette.action.selected elseif hovering and active then theme.palette.action.hover else theme.palette.surface.input
 	local _attributes = {
 		tag = "textbutton",
 	}
@@ -39,10 +50,14 @@ local function ToggleButton(props)
 	_attributes.state = {
 		disabled = disabled,
 		selected = selected,
+		hover = hovering,
+		focused = focused,
 	}
 	_attributes.Text = label
 	_attributes.Active = active
 	_attributes.Selectable = active
+	_attributes.BackgroundColor3 = face
+	_attributes.BackgroundTransparency = if disabled == true then controlFade else 0
 	_attributes.Event = {
 		Activated = function()
 			if active then
@@ -52,6 +67,22 @@ local function ToggleButton(props)
 				end
 			end
 		end,
+		MouseEnter = function()
+			if active then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
+		SelectionGained = function()
+			if active then
+				setFocused(true)
+			end
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
 	}
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
@@ -59,9 +90,17 @@ local function ToggleButton(props)
 	local _attributes_2 = table.clone(styles.corner)
 	setmetatable(_attributes_2, nil)
 	local _exp_1 = React.createElement("uicorner", _attributes_2)
-	local _attributes_3 = table.clone(styles.stroke)
-	setmetatable(_attributes_3, nil)
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_3))
+	local _result
+	if focused and active then
+		local _attributes_3 = table.clone(focusRing(theme.palette.focus))
+		setmetatable(_attributes_3, nil)
+		_result = React.createElement("uistroke", _attributes_3)
+	else
+		local _attributes_3 = table.clone(styles.stroke)
+		setmetatable(_attributes_3, nil)
+		_result = React.createElement("uistroke", _attributes_3)
+	end
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result)
 end
 local function ToggleButtonGroup(props)
 	local _binding = props

package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau

@@ -32,7 +32,7 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
 			AutoButtonColor = false,
 			Active = not disabled,
 			Selectable = not disabled,
-			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
+			TextColor3 = if selected then theme.palette.primary.main else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = textSize,
 		},