@rbxts/uiblox 0.2.0-alpha.12 → 0.2.0-alpha.13

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

@@ -5,6 +5,7 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    filled?: boolean;
 }
 declare function Alert(props: CustomizedProps<Frame, AlertProps>): JSX.Element;
 export default Alert;

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

@@ -9,6 +9,7 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local filled = _binding.filled
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -17,6 +18,7 @@ local function Alert(props)
 	local styles = useAlertStyles({
 		severity = severity,
 		dismissible = dismissible,
+		filled = filled,
 	})
 	local _attributes = {}
 	local _condition = id

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

@@ -2,5 +2,6 @@ import { AlertSeverity } from "./alertTone";
 declare const useAlertStyles: (props: {
     severity?: AlertSeverity;
     dismissible?: boolean;
+    filled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAlertStyles;

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

@@ -7,13 +7,14 @@ local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverit
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
 	local dismissible = _param.dismissible
+	local filled = _param.filled
 	local tone = theme.palette.status[alertSeverity(severity)]
 	local closeSize = theme.spacing.calc(2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = tone.surface,
+			BackgroundColor3 = if filled == true then tone.main else tone.surface,
 			BorderSizePixel = 0,
 		},
 		padding = {
@@ -26,9 +27,9 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = tone.border,
+			Color = if filled == true then tone.main else tone.border,
 			Thickness = 1,
-			Transparency = 0,
+			Transparency = if filled == true then 1 else 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 		body = {
@@ -51,7 +52,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.main,
+			TextColor3 = if filled == true then tone.on else tone.main,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			LayoutOrder = 1,
 		},
@@ -70,7 +71,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
@@ -81,7 +82,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = theme.palette.text.secondary,
+		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
 		ScaleType = Enum.ScaleType.Fit,
 		ZIndex = 2,
 	}

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

@@ -5,6 +5,7 @@ export interface BottomNavigationProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    showLabels?: boolean;
 }
 declare function BottomNavigation<T>(props: CustomizedProps<Frame, BottomNavigationProps<T>>): JSX.Element;
 export default BottomNavigation;

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

@@ -10,11 +10,17 @@ local function BottomNavigation(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local showLabels = _binding.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBottomNavigationStyles()
+	local styles = useBottomNavigationStyles({
+		showLabels = showLabels,
+	})
 	local count = math.max(#options, 1)
 	local _attributes = {}
 	local _condition = id
@@ -51,7 +57,7 @@ local function BottomNavigation(props)
 			_attributes_2[_k] = _v
 		end
 		_attributes_2.Size = UDim2.new(1 / count, 0, 1, 0)
-		_attributes_2.Text = choice.label
+		_attributes_2.Text = if showLabels == false then "" else choice.label
 		_attributes_2.LayoutOrder = index
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active

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

@@ -1,2 +1,4 @@
-declare const useBottomNavigationStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+declare const useBottomNavigationStyles: (props: {
+    showLabels?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBottomNavigationStyles;

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

@@ -3,10 +3,14 @@ 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 useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme)
+local useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme, _param)
+	local showLabels = _param.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local _object = {
 		root = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(if showLabels == false then 5 else 7)),
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			ZIndex = 11000,

package/out/ui/packages/stateMatrix.luau

@@ -1621,298 +1621,319 @@ local function miscRows()
 	local _Length_1 = #_array_2
 	table.move(_array_2, 1, _Length_1, _length + 1, _array)
 	_length += _Length_1
-	local _array_3 = pair("Alert", "info", {
-		text = "Heads up",
-		variant = "info",
+	local _array_3 = pair("BottomNavigation", "icons", {
+		value = "Home",
+		options = { "Home", "Search", "Profile" },
+		variant = "icons",
 	})
 	local _Length_2 = #_array_3
 	table.move(_array_3, 1, _Length_2, _length + 1, _array)
 	_length += _Length_2
-	local _array_4 = pair("Alert", "success", {
-		text = "Saved",
-		variant = "success",
+	local _array_4 = pair("Alert", "info", {
+		text = "Heads up",
+		variant = "info",
 	})
 	local _Length_3 = #_array_4
 	table.move(_array_4, 1, _Length_3, _length + 1, _array)
 	_length += _Length_3
-	local _array_5 = pair("Alert", "warning", {
-		text = "Check this",
-		variant = "warning",
+	local _array_5 = pair("Alert", "success", {
+		text = "Saved",
+		variant = "success",
 	})
 	local _Length_4 = #_array_5
 	table.move(_array_5, 1, _Length_4, _length + 1, _array)
 	_length += _Length_4
-	local _array_6 = pair("Alert", "error", {
-		text = "Failed",
-		variant = "error",
+	local _array_6 = pair("Alert", "warning", {
+		text = "Check this",
+		variant = "warning",
 	})
 	local _Length_5 = #_array_6
 	table.move(_array_6, 1, _Length_5, _length + 1, _array)
 	_length += _Length_5
-	local _array_7 = pair("ToggleButton", "default")
+	local _array_7 = pair("Alert", "error", {
+		text = "Failed",
+		variant = "error",
+	})
 	local _Length_6 = #_array_7
 	table.move(_array_7, 1, _Length_6, _length + 1, _array)
 	_length += _Length_6
-	local _array_8 = pair("ToggleButton", "selected", {
-		value = true,
+	local _array_8 = pair("Alert", "filled", {
+		text = "Heads up",
+		variant = "filled",
 	})
 	local _Length_7 = #_array_8
 	table.move(_array_8, 1, _Length_7, _length + 1, _array)
 	_length += _Length_7
-	local _array_9 = pair("ToggleButton", "disabled", {
-		disabled = true,
-	})
+	local _array_9 = pair("ToggleButton", "default")
 	local _Length_8 = #_array_9
 	table.move(_array_9, 1, _Length_8, _length + 1, _array)
 	_length += _Length_8
-	local _array_10 = pair("ToggleButtonGroup", "default", {
-		value = "Left",
-		options = { "Left", "Center", "Right" },
+	local _array_10 = pair("ToggleButton", "selected", {
+		value = true,
 	})
 	local _Length_9 = #_array_10
 	table.move(_array_10, 1, _Length_9, _length + 1, _array)
 	_length += _Length_9
-	local _array_11 = pair("ToggleButtonGroup", "selected", {
-		value = "Center",
-		options = { "Left", "Center", "Right" },
+	local _array_11 = pair("ToggleButton", "disabled", {
+		disabled = true,
 	})
 	local _Length_10 = #_array_11
 	table.move(_array_11, 1, _Length_10, _length + 1, _array)
 	_length += _Length_10
-	local _array_12 = pair("Link", "default", {
-		text = "Open docs",
+	local _array_12 = pair("ToggleButton", "size-small", {
+		size = "small",
 	})
 	local _Length_11 = #_array_12
 	table.move(_array_12, 1, _Length_11, _length + 1, _array)
 	_length += _Length_11
-	local _array_13 = pair("Link", "hover-underline", {
-		text = "Open docs",
-		variant = "hover",
-		pointer = "hover",
+	local _array_13 = pair("ToggleButtonGroup", "default", {
+		value = "Left",
+		options = { "Left", "Center", "Right" },
 	})
 	local _Length_12 = #_array_13
 	table.move(_array_13, 1, _Length_12, _length + 1, _array)
 	_length += _Length_12
-	local _array_14 = pair("Link", "disabled", {
-		text = "Open docs",
-		disabled = true,
+	local _array_14 = pair("ToggleButtonGroup", "selected", {
+		value = "Center",
+		options = { "Left", "Center", "Right" },
 	})
 	local _Length_13 = #_array_14
 	table.move(_array_14, 1, _Length_13, _length + 1, _array)
 	_length += _Length_13
-	local _array_15 = pair("Link", "error", {
+	local _array_15 = pair("Link", "default", {
 		text = "Open docs",
-		variant = "error",
 	})
 	local _Length_14 = #_array_15
 	table.move(_array_15, 1, _Length_14, _length + 1, _array)
 	_length += _Length_14
-	local _array_16 = pair("Rating", "default", {
-		value = 0,
+	local _array_16 = pair("Link", "hover-underline", {
+		text = "Open docs",
+		variant = "hover",
+		pointer = "hover",
 	})
 	local _Length_15 = #_array_16
 	table.move(_array_16, 1, _Length_15, _length + 1, _array)
 	_length += _Length_15
-	local _array_17 = pair("Rating", "filled", {
-		value = 3,
+	local _array_17 = pair("Link", "disabled", {
+		text = "Open docs",
+		disabled = true,
 	})
 	local _Length_16 = #_array_17
 	table.move(_array_17, 1, _Length_16, _length + 1, _array)
 	_length += _Length_16
-	local _array_18 = pair("Rating", "disabled", {
-		value = 4,
-		disabled = true,
+	local _array_18 = pair("Link", "error", {
+		text = "Open docs",
+		variant = "error",
 	})
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Rating", "size-small", {
-		value = 3,
-		size = "small",
+	local _array_19 = pair("Rating", "default", {
+		value = 0,
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Stack", "column", {
-		variant = "column",
+	local _array_20 = pair("Rating", "filled", {
+		value = 3,
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Stack", "row", {
-		variant = "row",
+	local _array_21 = pair("Rating", "disabled", {
+		value = 4,
+		disabled = true,
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Stack", "spaced", {
-		variant = "column",
-		size = "large",
+	local _array_22 = pair("Rating", "size-small", {
+		value = 3,
+		size = "small",
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Box", "plain")
+	local _array_23 = pair("Stack", "column", {
+		variant = "column",
+	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Box", "padded", {
-		size = "medium",
+	local _array_24 = pair("Stack", "row", {
+		variant = "row",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Box", "paper", {
-		variant = "paper",
+	local _array_25 = pair("Stack", "spaced", {
+		variant = "column",
+		size = "large",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Container", "default", {
-		variant = "lg",
-	})
+	local _array_26 = pair("Box", "plain")
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Container", "sm", {
-		variant = "sm",
+	local _array_27 = pair("Box", "padded", {
+		size = "medium",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Container", "fluid", {
-		variant = "false",
+	local _array_28 = pair("Box", "paper", {
+		variant = "paper",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Backdrop", "default")
+	local _array_29 = pair("Container", "default", {
+		variant = "lg",
+	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Backdrop", "invisible", {
-		variant = "invisible",
+	local _array_30 = pair("Container", "sm", {
+		variant = "sm",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Backdrop", "closed", {
-		open = false,
+	local _array_31 = pair("Container", "fluid", {
+		variant = "false",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Divider", "horizontal", {
-		variant = "horizontal",
-	})
+	local _array_32 = pair("Backdrop", "default")
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Divider", "vertical", {
-		variant = "vertical",
+	local _array_33 = pair("Backdrop", "invisible", {
+		variant = "invisible",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("ImageList", "default")
+	local _array_34 = pair("Backdrop", "closed", {
+		open = false,
+	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("ImageList", "dense", {
-		size = "small",
+	local _array_35 = pair("Divider", "horizontal", {
+		variant = "horizontal",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("ImageList", "wide", {
-		size = "large",
+	local _array_36 = pair("Divider", "vertical", {
+		variant = "vertical",
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("SpeedDial", "closed", {
-		open = false,
-	})
+	local _array_37 = pair("ImageList", "default")
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_38 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_39 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("SpeedDial", "down", {
-		open = true,
-		variant = "down",
+	local _array_40 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_41 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_42 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("FormLabel", "error", {
-		text = "Email",
-		hasError = true,
+	local _array_43 = pair("SpeedDial", "down", {
+		open = true,
+		variant = "down",
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_44 = pair("FormLabel", "default", {
+		text = "Email",
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_45 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("Menu", "closed", {
-		open = false,
+	local _array_46 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
 	})
 	local _Length_45 = #_array_46
 	table.move(_array_46, 1, _Length_45, _length + 1, _array)
 	_length += _Length_45
-	local _array_47 = pair("Menu", "open", {
-		open = true,
+	local _array_47 = pair("FormHelperText", "default", {
+		text = "We never share this",
 	})
 	local _Length_46 = #_array_47
 	table.move(_array_47, 1, _Length_46, _length + 1, _array)
 	_length += _Length_46
-	local _array_48 = pair("Menu", "empty", {
-		open = true,
-		options = {},
+	local _array_48 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
 	})
 	local _Length_47 = #_array_48
 	table.move(_array_48, 1, _Length_47, _length + 1, _array)
 	_length += _Length_47
-	local _array_49 = pair("Menu", "dense", {
+	local _array_49 = pair("Menu", "closed", {
+		open = false,
+	})
+	local _Length_48 = #_array_49
+	table.move(_array_49, 1, _Length_48, _length + 1, _array)
+	_length += _Length_48
+	local _array_50 = pair("Menu", "open", {
+		open = true,
+	})
+	local _Length_49 = #_array_50
+	table.move(_array_50, 1, _Length_49, _length + 1, _array)
+	_length += _Length_49
+	local _array_51 = pair("Menu", "empty", {
+		open = true,
+		options = {},
+	})
+	local _Length_50 = #_array_51
+	table.move(_array_51, 1, _Length_50, _length + 1, _array)
+	_length += _Length_50
+	local _array_52 = pair("Menu", "dense", {
 		open = true,
 		variant = "dense",
 	})
-	table.move(_array_49, 1, #_array_49, _length + 1, _array)
+	table.move(_array_52, 1, #_array_52, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

package/out/ui/packages/toggleButton/components/ToggleButton.d.ts

@@ -1,9 +1,10 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
 export interface ToggleButtonProps {
     label: string;
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
     onActivated?: () => void;
 }
 declare function ToggleButton(props: CustomizedProps<TextButton, ToggleButtonProps>): JSX.Element;
@@ -12,6 +13,7 @@ export interface ToggleButtonGroupProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    size?: ControlSize;
 }
 export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
 export default ToggleButton;

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

@@ -8,6 +8,10 @@ local function ToggleButton(props)
 	local label = _binding.label
 	local selected = _binding.selected
 	local disabled = _binding.disabled
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
 	local onActivated = _binding.onActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -16,6 +20,7 @@ local function ToggleButton(props)
 	local styles = useToggleButtonStyles({
 		selected = selected,
 		disabled = disabled,
+		size = size,
 	})
 	local active = canActivate(disabled)
 	local _attributes = {}
@@ -67,11 +72,14 @@ local function ToggleButtonGroup(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local size = _binding.size
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useToggleButtonStyles({})
+	local styles = useToggleButtonStyles({
+		size = size,
+	})
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -103,6 +111,7 @@ local function ToggleButtonGroup(props)
 			label = choice.label,
 			selected = choice.value == value,
 			disabled = disabled == true or choice.disabled == true,
+			size = size,
 			onActivated = function()
 				if choice.value ~= value then
 					onChange(choice.value)

package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts

@@ -1,5 +1,7 @@
+import { ControlSize } from "../../../../theme/index";
 declare const useToggleButtonStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useToggleButtonStyles;

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

@@ -12,10 +12,17 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
 	if disabled == nil then
 		disabled = false
 	end
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local height = if size == "small" then theme.spacing.calc(3) elseif size == "large" then theme.spacing.calc(5) else theme.spacing.calc(4)
+	local textSize = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
+	local pad = theme.padding.calc(if size == "small" then 1 else 1.5)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.new(0, 0, 0, theme.spacing.calc(4)),
+			Size = UDim2.new(0, 0, 0, height),
 			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -23,11 +30,11 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
 			Selectable = not disabled,
 			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = textSize,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.12",
+	"version": "0.2.0-alpha.13",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",