@rbxts/uiblox 0.2.0-alpha.16 → 0.2.0-alpha.17

package/out/ui/packages/badge/components/Badge.d.ts

@@ -1,10 +1,12 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { BadgeColor } from "./Badge.styles";
 export interface BadgeProps {
     count?: number;
     max?: number;
     invisible?: boolean;
     variant?: "standard" | "dot";
+    color?: BadgeColor;
     children?: React.ReactNode;
 }
 declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;

package/out/ui/packages/badge/components/Badge.luau

@@ -21,6 +21,10 @@ local function Badge(props)
 	if variant == nil then
 		variant = "standard"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "error"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
@@ -28,6 +32,7 @@ local function Badge(props)
 	local ref = _binding.ref
 	local styles = useBadgeStyles({
 		variant = variant,
+		color = color,
 	})
 	local isDot = variant == "dot"
 	local shown = not invisible and (isDot or count > 0)

package/out/ui/packages/badge/components/Badge.styles.d.ts

@@ -1,4 +1,6 @@
+export type BadgeColor = "error" | "primary" | "success";
 declare const useBadgeStyles: (props: {
     variant?: "standard" | "dot";
+    color?: BadgeColor;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBadgeStyles;

package/out/ui/packages/badge/components/Badge.styles.luau

@@ -8,7 +8,12 @@ local useBadgeStyles = componentStyles("Badge", function(theme, _param)
 	if variant == nil then
 		variant = "standard"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "error"
+	end
 	local diameter = if variant == "dot" then theme.spacing.calc(1) else theme.spacing.calc(2) + theme.padding.calc(1)
+	local tone = if color == "primary" then theme.palette.primary elseif color == "success" then theme.palette.status.success else theme.palette.status.error
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -21,11 +26,11 @@ local useBadgeStyles = componentStyles("Badge", function(theme, _param)
 			Position = UDim2.fromScale(1, 0),
 			AutomaticSize = if variant == "dot" then Enum.AutomaticSize.None else Enum.AutomaticSize.X,
 			Size = UDim2.fromOffset(diameter, diameter),
-			BackgroundColor3 = theme.palette.status.error.main,
+			BackgroundColor3 = tone.main,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.inverse,
+			TextColor3 = if color == "error" then theme.palette.text.inverse else tone.on,
 			TextXAlignment = Enum.TextXAlignment.Center,
 			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,

package/out/ui/packages/snackbar/components/Snackbar.d.ts

@@ -6,6 +6,8 @@ export interface SnackbarProps {
     duration?: number;
     variant?: ToastVariants;
     open?: boolean;
+    action?: string;
+    onAction?: () => void;
 }
 declare function Snackbar(props: CustomizedProps<Frame, SnackbarProps>): JSX.Element | undefined;
 export default Snackbar;

package/out/ui/packages/snackbar/components/Snackbar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Toast = TS.import(script, script.Parent.Parent.Parent, "toast").Toast
+local snackbarActionLabel = TS.import(script, script.Parent, "snackbarAction").snackbarActionLabel
 local function Snackbar(props)
 	local _binding = props
 	local message = _binding.message
@@ -12,6 +13,8 @@ local function Snackbar(props)
 	if open == nil then
 		open = true
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -24,6 +27,8 @@ local function Snackbar(props)
 		onDismiss = onDismiss,
 		duration = duration,
 		variant = variant,
+		action = snackbarActionLabel(action),
+		onAction = onAction,
 		className = className,
 		sx = sx,
 	}

package/out/ui/packages/snackbar/components/snackbarAction.d.ts

@@ -0,0 +1 @@
+export declare function snackbarActionLabel(action?: string): string | undefined;

package/out/ui/packages/snackbar/components/snackbarAction.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function snackbarActionLabel(action)
+	if action == nil or #action == 0 then
+		return nil
+	end
+	return action
+end
+return {
+	snackbarActionLabel = snackbarActionLabel,
+}

package/out/ui/packages/stateMatrix.luau

@@ -1342,317 +1342,330 @@ local function chromeRows()
 	local _Length_1 = #_array_2
 	table.move(_array_2, 1, _Length_1, _length + 1, _array)
 	_length += _Length_1
-	local _array_3 = pair("Avatar", "initials", {
-		text = "BL",
+	local _array_3 = pair("Badge", "primary", {
+		variant = "primary",
 	})
 	local _Length_2 = #_array_3
 	table.move(_array_3, 1, _Length_2, _length + 1, _array)
 	_length += _Length_2
-	local _array_4 = pair("Avatar", "image", {
-		variant = "image",
+	local _array_4 = pair("Avatar", "initials", {
+		text = "BL",
 	})
 	local _Length_3 = #_array_4
 	table.move(_array_4, 1, _Length_3, _length + 1, _array)
 	_length += _Length_3
-	local _array_5 = pair("Avatar", "small", {
-		size = "small",
+	local _array_5 = pair("Avatar", "image", {
+		variant = "image",
 	})
 	local _Length_4 = #_array_5
 	table.move(_array_5, 1, _Length_4, _length + 1, _array)
 	_length += _Length_4
-	local _array_6 = pair("Avatar", "rounded", {
-		variant = "rounded",
+	local _array_6 = pair("Avatar", "small", {
+		size = "small",
 	})
 	local _Length_5 = #_array_6
 	table.move(_array_6, 1, _Length_5, _length + 1, _array)
 	_length += _Length_5
-	local _array_7 = pair("Drawer", "closed", {
-		open = false,
+	local _array_7 = pair("Avatar", "rounded", {
+		variant = "rounded",
 	})
 	local _Length_6 = #_array_7
 	table.move(_array_7, 1, _Length_6, _length + 1, _array)
 	_length += _Length_6
-	local _array_8 = pair("Drawer", "left", {
-		open = true,
-		variant = "left",
+	local _array_8 = pair("Drawer", "closed", {
+		open = false,
 	})
 	local _Length_7 = #_array_8
 	table.move(_array_8, 1, _Length_7, _length + 1, _array)
 	_length += _Length_7
-	local _array_9 = pair("Drawer", "right", {
+	local _array_9 = pair("Drawer", "left", {
 		open = true,
-		variant = "right",
+		variant = "left",
 	})
 	local _Length_8 = #_array_9
 	table.move(_array_9, 1, _Length_8, _length + 1, _array)
 	_length += _Length_8
-	local _array_10 = pair("Drawer", "wide", {
+	local _array_10 = pair("Drawer", "right", {
 		open = true,
-		variant = "wide",
+		variant = "right",
 	})
 	local _Length_9 = #_array_10
 	table.move(_array_10, 1, _Length_9, _length + 1, _array)
 	_length += _Length_9
-	local _array_11 = pair("Breadcrumbs", "single", {
-		text = "Home",
+	local _array_11 = pair("Drawer", "wide", {
+		open = true,
+		variant = "wide",
 	})
 	local _Length_10 = #_array_11
 	table.move(_array_11, 1, _Length_10, _length + 1, _array)
 	_length += _Length_10
-	local _array_12 = pair("Breadcrumbs", "trail", {
-		text = "Home / Library / Item",
+	local _array_12 = pair("Breadcrumbs", "single", {
+		text = "Home",
 	})
 	local _Length_11 = #_array_12
 	table.move(_array_12, 1, _Length_11, _length + 1, _array)
 	_length += _Length_11
-	local _array_13 = pair("Breadcrumbs", "collapsed", {
-		text = "Home / … / Item",
-		size = "small",
+	local _array_13 = pair("Breadcrumbs", "trail", {
+		text = "Home / Library / Item",
 	})
 	local _Length_12 = #_array_13
 	table.move(_array_13, 1, _Length_12, _length + 1, _array)
 	_length += _Length_12
-	local _array_14 = pair("Breadcrumbs", "custom-separator", {
-		text = "Home > Item",
+	local _array_14 = pair("Breadcrumbs", "collapsed", {
+		text = "Home / … / Item",
+		size = "small",
 	})
 	local _Length_13 = #_array_14
 	table.move(_array_14, 1, _Length_13, _length + 1, _array)
 	_length += _Length_13
-	local _array_15 = pair("Pagination", "first", {
-		value = 1,
+	local _array_15 = pair("Breadcrumbs", "custom-separator", {
+		text = "Home > Item",
 	})
 	local _Length_14 = #_array_15
 	table.move(_array_15, 1, _Length_14, _length + 1, _array)
 	_length += _Length_14
-	local _array_16 = pair("Pagination", "middle", {
-		value = 3,
+	local _array_16 = pair("Pagination", "first", {
+		value = 1,
 	})
 	local _Length_15 = #_array_16
 	table.move(_array_16, 1, _Length_15, _length + 1, _array)
 	_length += _Length_15
-	local _array_17 = pair("Pagination", "collapsed", {
-		value = 10,
-		size = "large",
+	local _array_17 = pair("Pagination", "middle", {
+		value = 3,
 	})
 	local _Length_16 = #_array_17
 	table.move(_array_17, 1, _Length_16, _length + 1, _array)
 	_length += _Length_16
-	local _array_18 = pair("Pagination", "disabled", {
-		value = 2,
-		disabled = true,
+	local _array_18 = pair("Pagination", "collapsed", {
+		value = 10,
+		size = "large",
 	})
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Pagination", "size-small", {
+	local _array_19 = pair("Pagination", "disabled", {
 		value = 2,
-		size = "small",
+		disabled = true,
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Stepper", "first", {
-		value = 0,
+	local _array_20 = pair("Pagination", "size-small", {
+		value = 2,
+		size = "small",
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Stepper", "middle", {
-		value = 1,
+	local _array_21 = pair("Stepper", "first", {
+		value = 0,
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Stepper", "last", {
-		value = 2,
+	local _array_22 = pair("Stepper", "middle", {
+		value = 1,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Stepper", "vertical", {
-		value = 1,
-		variant = "vertical",
+	local _array_23 = pair("Stepper", "last", {
+		value = 2,
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Accordion", "closed", {
-		open = false,
+	local _array_24 = pair("Stepper", "vertical", {
+		value = 1,
+		variant = "vertical",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Accordion", "open", {
-		open = true,
+	local _array_25 = pair("Accordion", "closed", {
+		open = false,
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Accordion", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_26 = pair("Accordion", "open", {
+		open = true,
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Accordion", "indicator", {
-		open = true,
+	local _array_27 = pair("Accordion", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Snackbar", "open", {
+	local _array_28 = pair("Accordion", "indicator", {
 		open = true,
-		text = "Saved",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Snackbar", "closed", {
-		open = false,
+	local _array_29 = pair("Snackbar", "open", {
+		open = true,
 		text = "Saved",
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Table", "empty", {
-		text = "",
+	local _array_30 = pair("Snackbar", "closed", {
+		open = false,
+		text = "Saved",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Table", "default", {
-		text = "Name / Role",
+	local _array_31 = pair("Snackbar", "action", {
+		open = true,
+		text = "Undo",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Table", "selected", {
-		text = "Name / Role",
-		value = 0,
+	local _array_32 = pair("Table", "empty", {
+		text = "",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Table", "dense", {
+	local _array_33 = pair("Table", "default", {
 		text = "Name / Role",
-		variant = "dense",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Autocomplete", "default", {
-		value = "Continue",
-		options = { "Continue", "Other" },
+	local _array_34 = pair("Table", "selected", {
+		text = "Name / Role",
+		value = 0,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Autocomplete", "open", {
-		value = "Continue",
-		options = { "Continue", "Other" },
-		open = true,
+	local _array_35 = pair("Table", "dense", {
+		text = "Name / Role",
+		variant = "dense",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Autocomplete", "disabled", {
+	local _array_36 = pair("Autocomplete", "default", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		disabled = true,
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("Autocomplete", "empty", {
-		value = "",
-		options = {},
+	local _array_37 = pair("Autocomplete", "open", {
+		value = "Continue",
+		options = { "Continue", "Other" },
 		open = true,
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("Autocomplete", "no-results", {
+	local _array_38 = pair("Autocomplete", "disabled", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		open = true,
-		filter = "zzz",
+		disabled = true,
 	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("Fab", "default")
+	local _array_39 = pair("Autocomplete", "empty", {
+		value = "",
+		options = {},
+		open = true,
+	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("Fab", "extended", {
-		text = "Compose",
+	local _array_40 = pair("Autocomplete", "no-results", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		open = true,
+		filter = "zzz",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("Fab", "small", {
-		size = "small",
-	})
+	local _array_41 = pair("Fab", "default")
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("Fab", "large", {
-		size = "large",
+	local _array_42 = pair("Fab", "extended", {
+		text = "Compose",
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("Fab", "disabled", {
-		disabled = true,
+	local _array_43 = pair("Fab", "small", {
+		size = "small",
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("Fab", "loading", {
-		loading = true,
+	local _array_44 = pair("Fab", "large", {
+		size = "large",
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("Fab", "accent", {
-		variant = "accent",
+	local _array_45 = pair("Fab", "disabled", {
+		disabled = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("AppBar", "default", {
-		text = "Storyblox",
+	local _array_46 = pair("Fab", "loading", {
+		loading = true,
 	})
 	local _Length_45 = #_array_46
 	table.move(_array_46, 1, _Length_45, _length + 1, _array)
 	_length += _Length_45
-	local _array_47 = pair("AppBar", "flat", {
-		text = "Storyblox",
-		variant = "flat",
+	local _array_47 = pair("Fab", "accent", {
+		variant = "accent",
 	})
 	local _Length_46 = #_array_47
 	table.move(_array_47, 1, _Length_46, _length + 1, _array)
 	_length += _Length_46
-	local _array_48 = pair("AppBar", "raised", {
+	local _array_48 = pair("AppBar", "default", {
 		text = "Storyblox",
-		variant = "raised",
 	})
 	local _Length_47 = #_array_48
 	table.move(_array_48, 1, _Length_47, _length + 1, _array)
 	_length += _Length_47
-	local _array_49 = pair("AppBar", "primary", {
+	local _array_49 = pair("AppBar", "flat", {
 		text = "Storyblox",
-		variant = "primary",
+		variant = "flat",
 	})
 	local _Length_48 = #_array_49
 	table.move(_array_49, 1, _Length_48, _length + 1, _array)
 	_length += _Length_48
-	local _array_50 = pair("BottomNavigation", "default", {
+	local _array_50 = pair("AppBar", "raised", {
+		text = "Storyblox",
+		variant = "raised",
+	})
+	local _Length_49 = #_array_50
+	table.move(_array_50, 1, _Length_49, _length + 1, _array)
+	_length += _Length_49
+	local _array_51 = pair("AppBar", "primary", {
+		text = "Storyblox",
+		variant = "primary",
+	})
+	local _Length_50 = #_array_51
+	table.move(_array_51, 1, _Length_50, _length + 1, _array)
+	_length += _Length_50
+	local _array_52 = pair("BottomNavigation", "default", {
 		value = "Home",
 		options = { "Home", "Search", "Profile" },
 	})
-	table.move(_array_50, 1, #_array_50, _length + 1, _array)
+	table.move(_array_52, 1, #_array_52, _length + 1, _array)
 	return _array
 end
 local function miscRows()

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

@@ -6,6 +6,8 @@ export interface ToastProps {
     duration?: number;
     variant?: ToastVariants;
     toggledAt?: number;
+    action?: string;
+    onAction?: () => void;
 }
 declare function Toast(props: CustomizedProps<Frame, ToastProps>): JSX.Element;
 export default Toast;

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

@@ -18,6 +18,8 @@ local function Toast(props)
 	if duration == nil then
 		duration = 4
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -26,6 +28,7 @@ local function Toast(props)
 	local container = _binding_1.container
 	local label = _binding_1.label
 	local close = _binding_1.close
+	local actionStyle = _binding_1.action
 	local activePosition = _binding_1.activePosition
 	local inActivePosition = _binding_1.inActivePosition
 	local frameRef = useRef()
@@ -90,6 +93,28 @@ local function Toast(props)
 	end
 	_attributes_1.Text = text
 	local _exp_2 = React.createElement("textlabel", _attributes_1)
+	local _condition_1 = action ~= nil and #action > 0
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Action",
+		}
+		for _k, _v in actionStyle do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = action
+		_attributes_2.Event = {
+			Activated = function()
+				if onAction then
+					onAction()
+				end
+				tween(Directions.Out)
+				if onDismiss then
+					onDismiss()
+				end
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_2))
+	end
 	local _attributes_2 = {
 		key = "Close",
 	}
@@ -104,7 +129,7 @@ local function Toast(props)
 			end
 		end,
 	}
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("imagebutton", _attributes_2))
 end
 local default = Toast
 return {

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

@@ -11,6 +11,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 	if variant == nil then
 		variant = ToastVariants.default
 	end
+	local action = _param.action
 	local getToastColors = function()
 		repeat
 			if variant == (ToastVariants.success) then
@@ -38,6 +39,8 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 		until true
 	end
 	local toastColors = getToastColors()
+	local hasAction = action ~= nil and #action > 0
+	local actionSlot = if hasAction then theme.spacing.calc(8) else 0
 	local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
 	local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
 	return createStyles({
@@ -50,17 +53,32 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50000,
 		},
 		label = {
-			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
-			Position = UDim2.new(0.5, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0.5, 0.5),
+			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),
 			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,
 			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),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = toastColors.content,
+			AutoButtonColor = false,
+			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)),

package/package.json

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