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

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.styles.luau

@@ -41,7 +41,7 @@ local useBottomNavigationStyles = componentStyles("BottomNavigation", function(t
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
 	_object[_left] = _object_1
 	_object.selected = {
-		TextColor3 = theme.palette.primary.main,
+		TextColor3 = theme.palette.text.primary,
 		BackgroundColor3 = theme.palette.action.selected,
 		BackgroundTransparency = 0.85,
 	}
@@ -49,8 +49,9 @@ local useBottomNavigationStyles = componentStyles("BottomNavigation", function(t
 		TextTransparency = 0.5,
 	}
 	_object.indicator = {
-		Size = UDim2.new(1, 0, 0, 2),
-		Position = UDim2.new(0, 0, 0, 0),
+		Size = UDim2.new(1, -theme.padding.calc(3), 0, 2),
+		Position = UDim2.new(0.5, 0, 0, theme.padding.calc(0.5)),
+		AnchorPoint = Vector2.new(0.5, 0),
 		BackgroundColor3 = theme.palette.primary.main,
 		BorderSizePixel = 0,
 	}

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

@@ -66,7 +66,9 @@ local function Breadcrumbs(props)
 					return setOpened(true)
 				end,
 			}
-			_result = (React.createElement("textbutton", _attributes_2))
+			local _attributes_3 = table.clone(styles.cap)
+			setmetatable(_attributes_3, nil)
+			_result = (React.createElement("textbutton", _attributes_2, React.createElement("uisizeconstraint", _attributes_3)))
 		else
 			local _attributes_2 = table.clone(cx(styles.item, current and styles.current))
 			setmetatable(_attributes_2, nil)
@@ -102,7 +104,9 @@ local function Breadcrumbs(props)
 					return _result_1
 				end,
 			}
-			_result = (React.createElement("textbutton", _attributes_2))
+			local _attributes_3 = table.clone(styles.cap)
+			setmetatable(_attributes_3, nil)
+			_result = (React.createElement("textbutton", _attributes_2, React.createElement("uisizeconstraint", _attributes_3)))
 		end
 		return React.createElement(React.Fragment, {
 			key = `{entry.label}-{order}`,

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

@@ -32,6 +32,10 @@ local useBreadcrumbStyles = componentStyles("Breadcrumbs", function(theme)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.link,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		cap = {
+			MaxSize = Vector2.new(theme.spacing.calc(20), math.huge),
 		},
 		current = {
 			TextColor3 = theme.palette.text.primary,

package/out/ui/packages/brickColorPicker/components/BrickColorPicker.luau

@@ -7,6 +7,7 @@ local useState = _react.useState
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local cx = _theme.cx
 local useTheme = _theme.useTheme
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
@@ -30,12 +31,14 @@ local function BrickColorPicker(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useBrickColorPickerStyles()
+	local hover = useEditorHover(disabled)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local active = canActivate(disabled)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(false)
 	local query, setQuery = useState("")
+	local over, setOver = useState("")
 	local catalog = useMemo(function()
 		return brickColorCatalog()
 	end, {})
@@ -74,12 +77,18 @@ local function BrickColorPicker(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = {
 		key = "Trigger",
 		ref = setAnchor,
@@ -87,6 +96,9 @@ local function BrickColorPicker(props)
 	for _k, _v in styles.trigger do
 		_attributes_1[_k] = _v
 	end
+	for _k, _v in (if hover.active then hover.face else {}) do
+		_attributes_1[_k] = _v
+	end
 	_attributes_1.Active = active
 	_attributes_1.Selectable = active
 	_attributes_1.Event = {
@@ -188,11 +200,17 @@ local function BrickColorPicker(props)
 			className = styles.list,
 			renderItem = function(color)
 				local picked = color.Number == value.Number
-				local _attributes_14 = table.clone(cx(styles.option, picked and styles.selected))
+				local _attributes_14 = table.clone(cx(styles.option, over == color.Name and styles.highlighted, picked and styles.selected))
 				setmetatable(_attributes_14, nil)
 				_attributes_14.Active = true
 				_attributes_14.Selectable = true
 				_attributes_14.Event = {
+					MouseEnter = function()
+						return setOver(color.Name)
+					end,
+					MouseLeave = function()
+						return setOver("")
+					end,
 					Activated = function()
 						onChange(color)
 						close()

package/out/ui/packages/brickColorPicker/components/BrickColorPicker.styles.luau

@@ -3,8 +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 _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorText = _editorFace.editorText
 local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			BackgroundTransparency = 1,
@@ -12,7 +15,7 @@ local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(t
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
@@ -27,70 +30,73 @@ local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(t
 			Size = UDim2.fromOffset(theme.spacing.calc(1.5), theme.spacing.calc(1.5)),
 			BorderSizePixel = 0,
 		},
-		label = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 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,
-		},
-		menu = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-		},
-		search = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-		},
-		list = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-			ScrollBarThickness = theme.padding.default,
-			ScrollBarImageColor3 = theme.palette.text.secondary,
-			ScrollingDirection = Enum.ScrollingDirection.Y,
-		},
-		option = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.action.hover,
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			AutoButtonColor = false,
-			Text = "",
-		},
-		highlighted = {
-			BackgroundTransparency = 0,
-		},
-		selected = {
-			BackgroundColor3 = theme.palette.action.selected,
-			BackgroundTransparency = 0,
-		},
-		optionLabel = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 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,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1)),
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.menu = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.surface.elevated,
+		BorderSizePixel = 0,
+	}
+	_object.search = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+	}
+	_object.list = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.surface.elevated,
+		BorderSizePixel = 0,
+		ScrollBarThickness = editorPad(theme),
+		ScrollBarImageColor3 = theme.palette.text.secondary,
+		ScrollingDirection = Enum.ScrollingDirection.Y,
+	}
+	_object.option = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.action.hover,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Text = "",
+	}
+	_object.highlighted = {
+		BackgroundTransparency = 0,
+	}
+	_object.selected = {
+		BackgroundColor3 = theme.palette.action.selected,
+		BackgroundTransparency = 0,
+	}
+	local _left_1 = "optionLabel"
+	local _object_2 = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	_object.padding = {
+		PaddingLeft = UDim.new(0, editorPad(theme)),
+		PaddingRight = UDim.new(0, editorPad(theme)),
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	return createStyles(_object)
 end)
 local default = useBrickColorPickerStyles
 return {

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

@@ -17,7 +17,9 @@ local buttonFace = _buttonLook.buttonFace
 local buttonIcon = _buttonLook.buttonIcon
 local spinnerPixels = _buttonLook.spinnerPixels
 local spinnerPlace = _buttonLook.spinnerPlace
+local buttonPaint = TS.import(script, script.Parent, "buttonPaint").buttonPaint
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
+local buttonColors
 local function Button(props)
 	local _binding = props
 	local text = _binding.text
@@ -81,20 +83,30 @@ local function Button(props)
 	local grow = glyph ~= nil and props.fullWidth ~= true
 	local reducedMotion = useReducedMotion(reducedProp)
 	local hovering, setHovering = useState(false)
+	local down, setDown = useState(false)
 	local focused, setFocused = useState(false)
 	local active = canActivate(disabled, loading)
-	local pressed = disabled or (not hoveringDisabled and active and (hovering or focused))
 	local face = buttonFace(text, loading, loadingLabel)
 	local place = spinnerPlace(loadingPosition)
 	local busy = loading or animating
+	local sweep = animating and not loading
 	local branded = (props.color or "primary") == "primary"
-	local spinnerColor = if variant == "contained" then if branded then theme.palette.primary.on else theme.palette.text.inverse elseif branded then theme.palette.primary.main else theme.palette.text.primary
+	local paint = buttonPaint({
+		variant = variant,
+		branded = branded,
+		disabled = disabled,
+		hover = hovering and not hoveringDisabled and active,
+		down = down and active,
+	})
+	local colors = buttonColors(theme, paint)
+	local labelTransparency = if face.hideText then 1 else paint.labelTransparency
 	useEffect(function()
 		if active then
 			return nil
 		end
 		setHovering(false)
 		setFocused(false)
+		setDown(false)
 	end, { active })
 	local _attributes = {
 		tag = "textbutton",
@@ -110,46 +122,30 @@ local function Button(props)
 	for _k, _v in font do
 		_object[_k] = _v
 	end
+	_object.BackgroundColor3 = colors.fill
+	_object.BackgroundTransparency = paint.fillTransparency
+	_object.TextColor3 = colors.label
+	_object.TextTransparency = labelTransparency
 	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 		loading = loading,
-		hover = hovering,
-		pressed = pressed,
+		hover = hovering and not hoveringDisabled,
+		pressed = down,
 		focused = focused,
 	}
 	_attributes.Active = active
-	_attributes.AutoButtonColor = active
+	_attributes.AutoButtonColor = false
 	_attributes.Selectable = active
 	_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
-	else
-		local _result_1 = className
-		if _result_1 ~= nil then
-			_result_1 = _result_1.BackgroundTransparency
-		end
-		local _condition_1 = _result_1
-		if _condition_1 == nil then
-			_condition_1 = (if variant == "outlined" or variant == "text" then 1 else 0)
-		end
-		_result = _condition_1
-	end
-	_attributes.BackgroundTransparency = _result
 	_attributes.Event = {
 		MouseEnter = function()
 			if not active then
@@ -162,6 +158,7 @@ local function Button(props)
 		end,
 		MouseLeave = function()
 			setHovering(false)
+			setDown(false)
 			if mouseLeave then
 				mouseLeave()
 			end
@@ -180,11 +177,16 @@ local function Button(props)
 			end
 		end,
 		MouseButton1Down = function()
-			if active and onLeftDown then
+			if not active then
+				return nil
+			end
+			setDown(true)
+			if onLeftDown then
 				onLeftDown()
 			end
 		end,
 		MouseButton1Up = function()
+			setDown(false)
 			if active and onLeftUp then
 				onLeftUp()
 			end
@@ -205,21 +207,21 @@ local function Button(props)
 			end
 		end,
 	}
-	local _condition_1 = not busy and focused
+	local _condition_1 = not sweep and focused
 	if _condition_1 then
 		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"
+	local _condition_2 = not sweep 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 _exp = sweep and React.createElement(LoadingStroke, {
+		animating = not reducedMotion,
+		color = colors.label,
 	})
 	local _condition_3 = rounded
 	if _condition_3 then
@@ -230,7 +232,7 @@ local function Button(props)
 	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,
+		color = colors.label,
 		reducedMotion = reducedMotion,
 		className = {
 			AnchorPoint = Vector2.new(place.anchorX, 0.5),
@@ -253,7 +255,8 @@ local function Button(props)
 		BorderSizePixel = 0,
 		ScaleType = Enum.ScaleType.Fit,
 		Image = glyph,
-		ImageColor3 = spinnerColor,
+		ImageColor3 = colors.label,
+		ImageTransparency = labelTransparency,
 		Size = UDim2.fromOffset(metrics.icon, metrics.icon),
 	}), React.createElement("textlabel", {
 		key = "Label",
@@ -264,10 +267,34 @@ local function Button(props)
 		Size = UDim2.fromScale(0, 0),
 		Font = theme.typography.fontFamilies.default,
 		TextSize = metrics.font,
-		TextColor3 = spinnerColor,
+		TextColor3 = colors.label,
+		TextTransparency = labelTransparency,
 		Text = face.text,
 	}))), children)
 end
+function buttonColors(theme, paint)
+	local brand = theme.palette.primary
+	local fills = {
+		primary = brand.main,
+		primaryHover = brand.hover,
+		primaryPressed = brand.pressed,
+		ink = theme.palette.text.primary,
+		actionHover = theme.palette.action.hover,
+		actionPressed = theme.palette.action.pressed,
+		none = theme.palette.surface.paper,
+	}
+	local labels = {
+		onPrimary = brand.on,
+		inverse = theme.palette.text.inverse,
+		primary = brand.main,
+		ink = theme.palette.text.primary,
+		disabled = theme.palette.text.disabled,
+	}
+	return {
+		fill = fills[paint.fill],
+		label = labels[paint.label],
+	}
+end
 local default = Button
 return {
 	default = default,

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

@@ -0,0 +1,16 @@
+export type ButtonVariantName = "contained" | "outlined" | "text";
+export type ButtonFill = "primary" | "primaryHover" | "primaryPressed" | "ink" | "actionHover" | "actionPressed" | "none";
+export type ButtonLabel = "onPrimary" | "inverse" | "primary" | "ink" | "disabled";
+export interface ButtonPaint {
+    fill: ButtonFill;
+    label: ButtonLabel;
+    fillTransparency: number;
+    labelTransparency: number;
+}
+export declare function buttonPaint(input: {
+    variant: ButtonVariantName;
+    branded: boolean;
+    disabled: boolean;
+    hover: boolean;
+    down: boolean;
+}): ButtonPaint;

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

@@ -0,0 +1,70 @@
+-- Compiled with roblox-ts v3.0.0
+local function buttonPaint(input)
+	local contained = input.variant ~= "outlined" and input.variant ~= "text"
+	if input.disabled then
+		if contained then
+			return {
+				fill = if input.branded then "primary" else "ink",
+				label = if input.branded then "onPrimary" else "inverse",
+				fillTransparency = 0.45,
+				labelTransparency = 0.35,
+			}
+		end
+		return {
+			fill = "none",
+			label = "disabled",
+			fillTransparency = 1,
+			labelTransparency = 0,
+		}
+	end
+	if contained then
+		if input.down then
+			return {
+				fill = if input.branded then "primaryPressed" else "actionPressed",
+				label = if input.branded then "onPrimary" else "ink",
+				fillTransparency = 0,
+				labelTransparency = 0,
+			}
+		end
+		if input.hover then
+			return {
+				fill = if input.branded then "primaryHover" else "actionHover",
+				label = if input.branded then "onPrimary" else "ink",
+				fillTransparency = 0,
+				labelTransparency = 0,
+			}
+		end
+		return {
+			fill = if input.branded then "primary" else "ink",
+			label = if input.branded then "onPrimary" else "inverse",
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	local label = if input.branded then "primary" else "ink"
+	if input.down then
+		return {
+			fill = "actionPressed",
+			label = label,
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	if input.hover then
+		return {
+			fill = "actionHover",
+			label = label,
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	return {
+		fill = "none",
+		label = label,
+		fillTransparency = 1,
+		labelTransparency = 0,
+	}
+end
+return {
+	buttonPaint = buttonPaint,
+}

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

@@ -8,6 +8,7 @@ export interface ButtonGroupProps {
     onItem?: (index: number) => void;
     disabled?: boolean;
     size?: ControlSize;
+    selected?: number;
 }
 declare function ButtonGroup(props: CustomizedProps<Frame, ButtonGroupProps>): JSX.Element;
 export default ButtonGroup;

package/out/ui/packages/buttonGroup/components/ButtonGroup.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "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 buttonGroupEdge = TS.import(script, script.Parent, "buttonGroupEdge").buttonGroupEdge
@@ -11,6 +12,7 @@ local function ButtonGroup(props)
 	local onItem = _binding.onItem
 	local disabled = _binding.disabled
 	local size = _binding.size
+	local selected = _binding.selected
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -18,6 +20,8 @@ local function ButtonGroup(props)
 	local styles = useButtonGroupStyles({
 		size = size,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local count = #items
 	local groupOff = disabled == true
 	local _attributes = {
@@ -49,6 +53,7 @@ local function ButtonGroup(props)
 	local _callback = function(item, index)
 		local off = groupOff or item.disabled == true
 		local active = canActivate(off)
+		local picked = not off and index == selected
 		local edge = buttonGroupEdge(index, count)
 		local rule = edge == "start" or edge == "middle"
 		local _attributes_4 = {
@@ -58,6 +63,9 @@ local function ButtonGroup(props)
 			_attributes_4[_k] = _v
 		end
 		_attributes_4.Text = item.label
+		_attributes_4.TextColor3 = if picked then theme.palette.primary.on else theme.palette.text.primary
+		_attributes_4.BackgroundColor3 = theme.palette.primary.main
+		_attributes_4.BackgroundTransparency = if picked then 0 else 1
 		_attributes_4.TextTransparency = if off then 0.5 else 0
 		_attributes_4.Active = active
 		_attributes_4.Selectable = active
@@ -74,7 +82,14 @@ local function ButtonGroup(props)
 		}
 		local _attributes_5 = table.clone(styles.pad)
 		setmetatable(_attributes_5, nil)
-		local _exp_3 = React.createElement("textbutton", _attributes_4, React.createElement("uipadding", _attributes_5))
+		local _exp_3 = React.createElement("uipadding", _attributes_5)
+		local _condition_1 = picked and edge ~= "middle"
+		if _condition_1 then
+			local _attributes_6 = table.clone(styles.corner)
+			setmetatable(_attributes_6, nil)
+			_condition_1 = React.createElement("uicorner", _attributes_6)
+		end
+		local _exp_4 = React.createElement("textbutton", _attributes_4, _exp_3, _condition_1)
 		local _result
 		if rule then
 			local _attributes_6 = {
@@ -88,7 +103,7 @@ local function ButtonGroup(props)
 		else
 			_result = nil
 		end
-		return React.createElement(React.Fragment, nil, _exp_3, _result)
+		return React.createElement(React.Fragment, nil, _exp_4, _result)
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)