@lattice-ui/toast 0.3.0

package/README.md

@@ -0,0 +1,21 @@
+# @lattice-ui/toast
+
+Headless toast primitives for Roblox UI with queue-based visibility and automatic dismissal.
+
+## Exports
+
+- `Toast`
+- `Toast.Provider`
+- `Toast.Viewport`
+- `Toast.Root`
+- `Toast.Title`
+- `Toast.Description`
+- `Toast.Action`
+- `Toast.Close`
+- `useToast`
+
+## Notes
+
+- Imperative API is provided through `useToast()`.
+- Default toast timing is `durationMs=4000` with `maxVisible=3`.
+- Queue helpers are exported for deterministic unit testing.

package/out/Toast/ToastAction.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastActionProps } from "./types";
+export declare function ToastAction(props: ToastActionProps): React.JSX.Element;

package/out/Toast/ToastAction.luau

@@ -0,0 +1,43 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function ToastAction(props)
+	local handleActivated = React.useCallback(function()
+		local _result = props.onAction
+		if _result ~= nil then
+			_result()
+		end
+	end, { props })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ToastAction] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Active = true,
+			Event = {
+				Activated = handleActivated,
+			},
+			Selectable = true,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = true,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(58, 66, 84),
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Selectable = true,
+		Size = UDim2.fromOffset(88, 26),
+		Text = "Action",
+		TextColor3 = Color3.fromRGB(235, 240, 248),
+		TextSize = 13,
+	}, props.children)
+end
+return {
+	ToastAction = ToastAction,
+}

package/out/Toast/ToastClose.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastCloseProps } from "./types";
+export declare function ToastClose(props: ToastCloseProps): React.JSX.Element;

package/out/Toast/ToastClose.luau

@@ -0,0 +1,43 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function ToastClose(props)
+	local handleActivated = React.useCallback(function()
+		local _result = props.onClose
+		if _result ~= nil then
+			_result()
+		end
+	end, { props })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ToastClose] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Active = true,
+			Event = {
+				Activated = handleActivated,
+			},
+			Selectable = true,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = true,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(58, 66, 84),
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Selectable = true,
+		Size = UDim2.fromOffset(26, 26),
+		Text = "X",
+		TextColor3 = Color3.fromRGB(235, 240, 248),
+		TextSize = 13,
+	})
+end
+return {
+	ToastClose = ToastClose,
+}

package/out/Toast/ToastDescription.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastDescriptionProps } from "./types";
+export declare function ToastDescription(props: ToastDescriptionProps): React.JSX.Element;

package/out/Toast/ToastDescription.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function ToastDescription(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ToastDescription] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 18),
+		Text = "Description",
+		TextColor3 = Color3.fromRGB(172, 180, 196),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	ToastDescription = ToastDescription,
+}

package/out/Toast/ToastProvider.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { ToastApi, ToastProviderProps } from "./types";
+export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+export declare function useToast(): ToastApi;

package/out/Toast/ToastProvider.luau

@@ -0,0 +1,111 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _context = TS.import(script, script.Parent, "context")
+local ToastContextProvider = _context.ToastContextProvider
+local useToastContext = _context.useToastContext
+local _queue = TS.import(script, script.Parent, "queue")
+local enqueueToast = _queue.enqueueToast
+local getVisibleToasts = _queue.getVisibleToasts
+local pruneExpiredToasts = _queue.pruneExpiredToasts
+local RunService = game:GetService("RunService")
+local function nowMs()
+	return math.floor(os.clock() * 1000)
+end
+local function ToastProvider(props)
+	local _condition = props.defaultDurationMs
+	if _condition == nil then
+		_condition = 4000
+	end
+	local defaultDurationMs = math.max(0, _condition)
+	local _condition_1 = props.maxVisible
+	if _condition_1 == nil then
+		_condition_1 = 3
+	end
+	local maxVisible = math.max(1, _condition_1)
+	local toasts, setToasts = React.useState({})
+	local idSequenceRef = React.useRef(0)
+	local enqueue = React.useCallback(function(options)
+		idSequenceRef.current += 1
+		local _condition_2 = options.id
+		if _condition_2 == nil then
+			_condition_2 = `toast-{idSequenceRef.current}`
+		end
+		local id = _condition_2
+		setToasts(function(currentQueue)
+			return enqueueToast(currentQueue, {
+				id = id,
+				title = options.title,
+				description = options.description,
+				durationMs = options.durationMs,
+				createdAtMs = nowMs(),
+			})
+		end)
+		return id
+	end, {})
+	local remove = React.useCallback(function(id)
+		setToasts(function(currentQueue)
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue = {}
+			local _callback = function(toast)
+				return toast.id ~= id
+			end
+			local _length = 0
+			for _k, _v in currentQueue do
+				if _callback(_v, _k - 1, currentQueue) == true then
+					_length += 1
+					_newValue[_length] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			return _newValue
+		end)
+	end, {})
+	local clear = React.useCallback(function()
+		setToasts({})
+	end, {})
+	React.useEffect(function()
+		if #toasts == 0 then
+			return nil
+		end
+		local connection = RunService.Heartbeat:Connect(function()
+			setToasts(function(currentQueue)
+				return pruneExpiredToasts(currentQueue, nowMs(), maxVisible, defaultDurationMs)
+			end)
+		end)
+		return function()
+			connection:Disconnect()
+		end
+	end, { defaultDurationMs, maxVisible, #toasts })
+	local visibleToasts = React.useMemo(function()
+		return getVisibleToasts(toasts, maxVisible)
+	end, { maxVisible, toasts })
+	local contextValue = React.useMemo(function()
+		return {
+			toasts = toasts,
+			visibleToasts = visibleToasts,
+			defaultDurationMs = defaultDurationMs,
+			maxVisible = maxVisible,
+			enqueue = enqueue,
+			remove = remove,
+			clear = clear,
+		}
+	end, { clear, defaultDurationMs, enqueue, maxVisible, remove, toasts, visibleToasts })
+	return React.createElement(ToastContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+local function useToast()
+	local toastContext = useToastContext()
+	return {
+		toasts = toastContext.toasts,
+		visibleToasts = toastContext.visibleToasts,
+		enqueue = toastContext.enqueue,
+		remove = toastContext.remove,
+		clear = toastContext.clear,
+	}
+end
+return {
+	ToastProvider = ToastProvider,
+	useToast = useToast,
+}

package/out/Toast/ToastRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastRootProps } from "./types";
+export declare function ToastRoot(props: ToastRootProps): React.JSX.Element;

package/out/Toast/ToastRoot.luau

@@ -0,0 +1,37 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function ToastRoot(props)
+	local _condition = props.visible
+	if _condition == nil then
+		_condition = true
+	end
+	local visible = _condition
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[ToastRoot] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Visible = visible,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(38, 45, 59),
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(320, 72),
+		Visible = visible,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, 10),
+	}), React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, 8),
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+		PaddingTop = UDim.new(0, 8),
+	}), props.children)
+end
+return {
+	ToastRoot = ToastRoot,
+}

package/out/Toast/ToastTitle.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastTitleProps } from "./types";
+export declare function ToastTitle(props: ToastTitleProps): React.JSX.Element;

package/out/Toast/ToastTitle.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function ToastTitle(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ToastTitle] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(300, 20),
+		Text = "Toast",
+		TextColor3 = Color3.fromRGB(235, 240, 248),
+		TextSize = 14,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	})
+end
+return {
+	ToastTitle = ToastTitle,
+}

package/out/Toast/ToastViewport.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { ToastViewportProps } from "./types";
+export declare function ToastViewport(props: ToastViewportProps): React.JSX.Element;

package/out/Toast/ToastViewport.luau

@@ -0,0 +1,95 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useToastContext = TS.import(script, script.Parent, "context").useToastContext
+local ToastClose = TS.import(script, script.Parent, "ToastClose").ToastClose
+local ToastDescription = TS.import(script, script.Parent, "ToastDescription").ToastDescription
+local ToastRoot = TS.import(script, script.Parent, "ToastRoot").ToastRoot
+local ToastTitle = TS.import(script, script.Parent, "ToastTitle").ToastTitle
+local function ToastViewport(props)
+	local toastContext = useToastContext()
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[ToastViewport] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	local _exp = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Vertical,
+		Padding = UDim.new(0, 8),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _exp_1 = toastContext.visibleToasts
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#_exp_1)
+	local _callback = function(toast)
+		local _attributes = {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromOffset(264, 20),
+		}
+		local _condition = toast.title
+		if _condition == nil then
+			_condition = "Notification"
+		end
+		_attributes.Text = _condition
+		_attributes.TextColor3 = Color3.fromRGB(235, 240, 248)
+		_attributes.TextSize = 14
+		_attributes.TextXAlignment = Enum.TextXAlignment.Left
+		local _exp_2 = React.createElement("frame", {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromOffset(300, 22),
+		}, React.createElement(ToastTitle, {
+			asChild = true,
+		}, React.createElement("textlabel", _attributes)), React.createElement(ToastClose, {
+			asChild = true,
+			onClose = function()
+				return toastContext.remove(toast.id)
+			end,
+		}, React.createElement("textbutton", {
+			AutoButtonColor = false,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Position = UDim2.fromOffset(274, 0),
+			Size = UDim2.fromOffset(24, 20),
+			Text = "X",
+			TextColor3 = Color3.fromRGB(172, 180, 196),
+			TextSize = 12,
+		})))
+		local _attributes_1 = {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Position = UDim2.fromOffset(0, 24),
+			Size = UDim2.fromOffset(300, 18),
+		}
+		local _condition_1 = toast.description
+		if _condition_1 == nil then
+			_condition_1 = ""
+		end
+		_attributes_1.Text = _condition_1
+		_attributes_1.TextColor3 = Color3.fromRGB(172, 180, 196)
+		_attributes_1.TextSize = 13
+		_attributes_1.TextXAlignment = Enum.TextXAlignment.Left
+		return React.createElement(ToastRoot, {
+			key = toast.id,
+		}, _exp_2, React.createElement(ToastDescription, {
+			asChild = true,
+		}, React.createElement("textlabel", _attributes_1)))
+	end
+	for _k, _v in _exp_1 do
+		_newValue[_k] = _callback(_v, _k - 1, _exp_1)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(340, 320),
+	}, _exp, _newValue, props.children)
+end
+return {
+	ToastViewport = ToastViewport,
+}

package/out/Toast/context.d.ts

@@ -0,0 +1,3 @@
+import type { ToastContextValue } from "./types";
+declare const ToastContextProvider: import("@rbxts/react").Provider<ToastContextValue | undefined>, useToastContext: () => ToastContextValue;
+export { ToastContextProvider, useToastContext };

package/out/Toast/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Toast")
+local ToastContextProvider = _binding[1]
+local useToastContext = _binding[2]
+return {
+	ToastContextProvider = ToastContextProvider,
+	useToastContext = useToastContext,
+}

package/out/Toast/queue.d.ts

@@ -0,0 +1,11 @@
+export type ToastRecord = {
+    id: string;
+    title?: string;
+    description?: string;
+    durationMs?: number;
+    createdAtMs: number;
+};
+export declare function enqueueToast(queue: Array<ToastRecord>, toast: ToastRecord): ToastRecord[];
+export declare function dequeueToast(queue: Array<ToastRecord>): ToastRecord[];
+export declare function getVisibleToasts(queue: Array<ToastRecord>, maxVisible: number): ToastRecord[];
+export declare function pruneExpiredToasts(queue: Array<ToastRecord>, nowMs: number, maxVisible: number, defaultDurationMs: number): ToastRecord[];

package/out/Toast/queue.luau

@@ -0,0 +1,82 @@
+-- Compiled with roblox-ts v3.0.0
+local function enqueueToast(queue, toast)
+	local _array = {}
+	local _length = #_array
+	local _queueLength = #queue
+	table.move(queue, 1, _queueLength, _length + 1, _array)
+	_length += _queueLength
+	_array[_length + 1] = toast
+	return _array
+end
+local function dequeueToast(queue)
+	if #queue == 0 then
+		return queue
+	end
+	local nextQueue = {}
+	for index = 1, #queue - 1 do
+		local item = queue[index + 1]
+		if item then
+			table.insert(nextQueue, item)
+		end
+	end
+	return nextQueue
+end
+local function getVisibleToasts(queue, maxVisible)
+	local limit = math.max(1, maxVisible)
+	local visible = {}
+	do
+		local index = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < #queue and index < limit) then
+				break
+			end
+			local item = queue[index + 1]
+			if item then
+				table.insert(visible, item)
+			end
+		end
+	end
+	return visible
+end
+local function pruneExpiredToasts(queue, nowMs, maxVisible, defaultDurationMs)
+	local visibleCount = math.max(1, maxVisible)
+	local changed = false
+	local nextQueue = {}
+	for index = 0, #queue - 1 do
+		local toast = queue[index + 1]
+		if not toast then
+			continue
+		end
+		if index + 1 > visibleCount then
+			table.insert(nextQueue, toast)
+			continue
+		end
+		local _condition = toast.durationMs
+		if _condition == nil then
+			_condition = defaultDurationMs
+		end
+		local duration = _condition
+		if duration <= 0 then
+			table.insert(nextQueue, toast)
+			continue
+		end
+		if nowMs - toast.createdAtMs >= duration then
+			changed = true
+			continue
+		end
+		table.insert(nextQueue, toast)
+	end
+	return if changed then nextQueue else queue
+end
+return {
+	enqueueToast = enqueueToast,
+	dequeueToast = dequeueToast,
+	getVisibleToasts = getVisibleToasts,
+	pruneExpiredToasts = pruneExpiredToasts,
+}

package/out/Toast/types.d.ts

@@ -0,0 +1,56 @@
+import type React from "@rbxts/react";
+import type { ToastRecord } from "./queue";
+export type ToastOptions = {
+    id?: string;
+    title?: string;
+    description?: string;
+    durationMs?: number;
+};
+export type ToastContextValue = {
+    toasts: Array<ToastRecord>;
+    visibleToasts: Array<ToastRecord>;
+    defaultDurationMs: number;
+    maxVisible: number;
+    enqueue: (options: ToastOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+};
+export type ToastApi = {
+    toasts: Array<ToastRecord>;
+    visibleToasts: Array<ToastRecord>;
+    enqueue: (options: ToastOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+};
+export type ToastProviderProps = {
+    defaultDurationMs?: number;
+    maxVisible?: number;
+    children?: React.ReactNode;
+};
+export type ToastViewportProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+export type ToastRootProps = {
+    asChild?: boolean;
+    visible?: boolean;
+    children?: React.ReactNode;
+};
+export type ToastTitleProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type ToastDescriptionProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type ToastActionProps = {
+    asChild?: boolean;
+    onAction?: () => void;
+    children?: React.ReactElement;
+};
+export type ToastCloseProps = {
+    asChild?: boolean;
+    onClose?: () => void;
+    children?: React.ReactElement;
+};

package/out/Toast/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,20 @@
+import { ToastAction } from "./Toast/ToastAction";
+import { ToastClose } from "./Toast/ToastClose";
+import { ToastDescription } from "./Toast/ToastDescription";
+import { ToastProvider } from "./Toast/ToastProvider";
+import { ToastRoot } from "./Toast/ToastRoot";
+import { ToastTitle } from "./Toast/ToastTitle";
+import { ToastViewport } from "./Toast/ToastViewport";
+export declare const Toast: {
+    readonly Provider: typeof ToastProvider;
+    readonly Viewport: typeof ToastViewport;
+    readonly Root: typeof ToastRoot;
+    readonly Title: typeof ToastTitle;
+    readonly Description: typeof ToastDescription;
+    readonly Action: typeof ToastAction;
+    readonly Close: typeof ToastClose;
+};
+export type { ToastRecord } from "./Toast/queue";
+export { dequeueToast, enqueueToast, getVisibleToasts, pruneExpiredToasts } from "./Toast/queue";
+export { useToast } from "./Toast/ToastProvider";
+export type { ToastActionProps, ToastCloseProps, ToastContextValue, ToastDescriptionProps, ToastOptions, ToastProviderProps, ToastRootProps, ToastTitleProps, ToastViewportProps, } from "./Toast/types";

package/out/init.luau

@@ -0,0 +1,27 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local ToastAction = TS.import(script, script, "Toast", "ToastAction").ToastAction
+local ToastClose = TS.import(script, script, "Toast", "ToastClose").ToastClose
+local ToastDescription = TS.import(script, script, "Toast", "ToastDescription").ToastDescription
+local ToastProvider = TS.import(script, script, "Toast", "ToastProvider").ToastProvider
+local ToastRoot = TS.import(script, script, "Toast", "ToastRoot").ToastRoot
+local ToastTitle = TS.import(script, script, "Toast", "ToastTitle").ToastTitle
+local ToastViewport = TS.import(script, script, "Toast", "ToastViewport").ToastViewport
+local Toast = {
+	Provider = ToastProvider,
+	Viewport = ToastViewport,
+	Root = ToastRoot,
+	Title = ToastTitle,
+	Description = ToastDescription,
+	Action = ToastAction,
+	Close = ToastClose,
+}
+local _queue = TS.import(script, script, "Toast", "queue")
+exports.dequeueToast = _queue.dequeueToast
+exports.enqueueToast = _queue.enqueueToast
+exports.getVisibleToasts = _queue.getVisibleToasts
+exports.pruneExpiredToasts = _queue.pruneExpiredToasts
+exports.useToast = TS.import(script, script, "Toast", "ToastProvider").useToast
+exports.Toast = Toast
+return exports

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lattice-ui/toast",
+  "version": "0.3.0",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/layer": "0.3.0",
+    "@lattice-ui/core": "0.3.0"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
+  }
+}

package/src/Toast/ToastAction.tsx

@@ -0,0 +1,46 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ToastActionProps } from "./types";
+
+export function ToastAction(props: ToastActionProps) {
+  const handleActivated = React.useCallback(() => {
+    props.onAction?.();
+  }, [props]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ToastAction] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot
+        Active
+        Event={{
+          Activated: handleActivated,
+        }}
+        Selectable
+      >
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(58, 66, 84)}
+      BorderSizePixel={0}
+      Event={{
+        Activated: handleActivated,
+      }}
+      Selectable
+      Size={UDim2.fromOffset(88, 26)}
+      Text="Action"
+      TextColor3={Color3.fromRGB(235, 240, 248)}
+      TextSize={13}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Toast/ToastClose.tsx

@@ -0,0 +1,44 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ToastCloseProps } from "./types";
+
+export function ToastClose(props: ToastCloseProps) {
+  const handleActivated = React.useCallback(() => {
+    props.onClose?.();
+  }, [props]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ToastClose] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot
+        Active
+        Event={{
+          Activated: handleActivated,
+        }}
+        Selectable
+      >
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(58, 66, 84)}
+      BorderSizePixel={0}
+      Event={{
+        Activated: handleActivated,
+      }}
+      Selectable
+      Size={UDim2.fromOffset(26, 26)}
+      Text="X"
+      TextColor3={Color3.fromRGB(235, 240, 248)}
+      TextSize={13}
+    />
+  );
+}

package/src/Toast/ToastDescription.tsx

@@ -0,0 +1,25 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ToastDescriptionProps } from "./types";
+
+export function ToastDescription(props: ToastDescriptionProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ToastDescription] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(300, 18)}
+      Text="Description"
+      TextColor3={Color3.fromRGB(172, 180, 196)}
+      TextSize={13}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Toast/ToastProvider.tsx

@@ -0,0 +1,85 @@
+import { React } from "@lattice-ui/core";
+import { ToastContextProvider, useToastContext } from "./context";
+import { enqueueToast, getVisibleToasts, pruneExpiredToasts, type ToastRecord } from "./queue";
+import type { ToastApi, ToastOptions, ToastProviderProps } from "./types";
+
+const RunService = game.GetService("RunService");
+
+function nowMs() {
+  return math.floor(os.clock() * 1000);
+}
+
+export function ToastProvider(props: ToastProviderProps) {
+  const defaultDurationMs = math.max(0, props.defaultDurationMs ?? 4000);
+  const maxVisible = math.max(1, props.maxVisible ?? 3);
+
+  const [toasts, setToasts] = React.useState<Array<ToastRecord>>([]);
+  const idSequenceRef = React.useRef(0);
+
+  const enqueue = React.useCallback((options: ToastOptions) => {
+    idSequenceRef.current += 1;
+    const id = options.id ?? `toast-${idSequenceRef.current}`;
+
+    setToasts((currentQueue) =>
+      enqueueToast(currentQueue, {
+        id,
+        title: options.title,
+        description: options.description,
+        durationMs: options.durationMs,
+        createdAtMs: nowMs(),
+      }),
+    );
+
+    return id;
+  }, []);
+
+  const remove = React.useCallback((id: string) => {
+    setToasts((currentQueue) => currentQueue.filter((toast) => toast.id !== id));
+  }, []);
+
+  const clear = React.useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  React.useEffect(() => {
+    if (toasts.size() === 0) {
+      return;
+    }
+
+    const connection = RunService.Heartbeat.Connect(() => {
+      setToasts((currentQueue) => pruneExpiredToasts(currentQueue, nowMs(), maxVisible, defaultDurationMs));
+    });
+
+    return () => {
+      connection.Disconnect();
+    };
+  }, [defaultDurationMs, maxVisible, toasts.size()]);
+
+  const visibleToasts = React.useMemo(() => getVisibleToasts(toasts, maxVisible), [maxVisible, toasts]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      toasts,
+      visibleToasts,
+      defaultDurationMs,
+      maxVisible,
+      enqueue,
+      remove,
+      clear,
+    }),
+    [clear, defaultDurationMs, enqueue, maxVisible, remove, toasts, visibleToasts],
+  );
+
+  return <ToastContextProvider value={contextValue}>{props.children}</ToastContextProvider>;
+}
+
+export function useToast(): ToastApi {
+  const toastContext = useToastContext();
+  return {
+    toasts: toastContext.toasts,
+    visibleToasts: toastContext.visibleToasts,
+    enqueue: toastContext.enqueue,
+    remove: toastContext.remove,
+    clear: toastContext.clear,
+  };
+}

package/src/Toast/ToastRoot.tsx

@@ -0,0 +1,33 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ToastRootProps } from "./types";
+
+export function ToastRoot(props: ToastRootProps) {
+  const visible = props.visible ?? true;
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[ToastRoot] `asChild` requires a child element.");
+    }
+
+    return <Slot Visible={visible}>{child}</Slot>;
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(38, 45, 59)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(320, 72)}
+      Visible={visible}
+    >
+      <uicorner CornerRadius={new UDim(0, 10)} />
+      <uipadding
+        PaddingBottom={new UDim(0, 8)}
+        PaddingLeft={new UDim(0, 10)}
+        PaddingRight={new UDim(0, 10)}
+        PaddingTop={new UDim(0, 8)}
+      />
+      {props.children}
+    </frame>
+  );
+}

package/src/Toast/ToastTitle.tsx

@@ -0,0 +1,25 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { ToastTitleProps } from "./types";
+
+export function ToastTitle(props: ToastTitleProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ToastTitle] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(300, 20)}
+      Text="Toast"
+      TextColor3={Color3.fromRGB(235, 240, 248)}
+      TextSize={14}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    />
+  );
+}

package/src/Toast/ToastViewport.tsx

@@ -0,0 +1,72 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useToastContext } from "./context";
+import { ToastClose } from "./ToastClose";
+import { ToastDescription } from "./ToastDescription";
+import { ToastRoot } from "./ToastRoot";
+import { ToastTitle } from "./ToastTitle";
+import type { ToastViewportProps } from "./types";
+
+export function ToastViewport(props: ToastViewportProps) {
+  const toastContext = useToastContext();
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[ToastViewport] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(340, 320)}>
+      <uilistlayout
+        FillDirection={Enum.FillDirection.Vertical}
+        Padding={new UDim(0, 8)}
+        SortOrder={Enum.SortOrder.LayoutOrder}
+      />
+      {toastContext.visibleToasts.map((toast) => (
+        <ToastRoot key={toast.id}>
+          <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(300, 22)}>
+            <ToastTitle asChild>
+              <textlabel
+                BackgroundTransparency={1}
+                BorderSizePixel={0}
+                Size={UDim2.fromOffset(264, 20)}
+                Text={toast.title ?? "Notification"}
+                TextColor3={Color3.fromRGB(235, 240, 248)}
+                TextSize={14}
+                TextXAlignment={Enum.TextXAlignment.Left}
+              />
+            </ToastTitle>
+            <ToastClose asChild onClose={() => toastContext.remove(toast.id)}>
+              <textbutton
+                AutoButtonColor={false}
+                BackgroundTransparency={1}
+                BorderSizePixel={0}
+                Position={UDim2.fromOffset(274, 0)}
+                Size={UDim2.fromOffset(24, 20)}
+                Text="X"
+                TextColor3={Color3.fromRGB(172, 180, 196)}
+                TextSize={12}
+              />
+            </ToastClose>
+          </frame>
+          <ToastDescription asChild>
+            <textlabel
+              BackgroundTransparency={1}
+              BorderSizePixel={0}
+              Position={UDim2.fromOffset(0, 24)}
+              Size={UDim2.fromOffset(300, 18)}
+              Text={toast.description ?? ""}
+              TextColor3={Color3.fromRGB(172, 180, 196)}
+              TextSize={13}
+              TextXAlignment={Enum.TextXAlignment.Left}
+            />
+          </ToastDescription>
+        </ToastRoot>
+      ))}
+      {props.children}
+    </frame>
+  );
+}

package/src/Toast/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { ToastContextValue } from "./types";
+
+const [ToastContextProvider, useToastContext] = createStrictContext<ToastContextValue>("Toast");
+
+export { ToastContextProvider, useToastContext };

package/src/Toast/queue.ts

@@ -0,0 +1,78 @@
+export type ToastRecord = {
+  id: string;
+  title?: string;
+  description?: string;
+  durationMs?: number;
+  createdAtMs: number;
+};
+
+export function enqueueToast(queue: Array<ToastRecord>, toast: ToastRecord) {
+  return [...queue, toast];
+}
+
+export function dequeueToast(queue: Array<ToastRecord>) {
+  if (queue.size() === 0) {
+    return queue;
+  }
+
+  const nextQueue: Array<ToastRecord> = [];
+  for (let index = 1; index < queue.size(); index++) {
+    const item = queue[index];
+    if (item) {
+      nextQueue.push(item);
+    }
+  }
+
+  return nextQueue;
+}
+
+export function getVisibleToasts(queue: Array<ToastRecord>, maxVisible: number) {
+  const limit = math.max(1, maxVisible);
+  const visible: Array<ToastRecord> = [];
+  for (let index = 0; index < queue.size() && index < limit; index++) {
+    const item = queue[index];
+    if (item) {
+      visible.push(item);
+    }
+  }
+
+  return visible;
+}
+
+export function pruneExpiredToasts(
+  queue: Array<ToastRecord>,
+  nowMs: number,
+  maxVisible: number,
+  defaultDurationMs: number,
+) {
+  const visibleCount = math.max(1, maxVisible);
+  let changed = false;
+
+  const nextQueue: Array<ToastRecord> = [];
+  for (let index = 0; index < queue.size(); index++) {
+    const toast = queue[index];
+    if (!toast) {
+      continue;
+    }
+
+    if (index + 1 > visibleCount) {
+      nextQueue.push(toast);
+      continue;
+    }
+
+    const duration = toast.durationMs ?? defaultDurationMs;
+    if (duration <= 0) {
+      nextQueue.push(toast);
+      continue;
+    }
+
+    if (nowMs - toast.createdAtMs >= duration) {
+      changed = true;
+      continue;
+    }
+
+    nextQueue.push(toast);
+  }
+
+  return changed ? nextQueue : queue;
+}

package/src/Toast/types.ts

@@ -0,0 +1,66 @@
+import type React from "@rbxts/react";
+import type { ToastRecord } from "./queue";
+
+export type ToastOptions = {
+  id?: string;
+  title?: string;
+  description?: string;
+  durationMs?: number;
+};
+
+export type ToastContextValue = {
+  toasts: Array<ToastRecord>;
+  visibleToasts: Array<ToastRecord>;
+  defaultDurationMs: number;
+  maxVisible: number;
+  enqueue: (options: ToastOptions) => string;
+  remove: (id: string) => void;
+  clear: () => void;
+};
+
+export type ToastApi = {
+  toasts: Array<ToastRecord>;
+  visibleToasts: Array<ToastRecord>;
+  enqueue: (options: ToastOptions) => string;
+  remove: (id: string) => void;
+  clear: () => void;
+};
+
+export type ToastProviderProps = {
+  defaultDurationMs?: number;
+  maxVisible?: number;
+  children?: React.ReactNode;
+};
+
+export type ToastViewportProps = {
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type ToastRootProps = {
+  asChild?: boolean;
+  visible?: boolean;
+  children?: React.ReactNode;
+};
+
+export type ToastTitleProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type ToastDescriptionProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type ToastActionProps = {
+  asChild?: boolean;
+  onAction?: () => void;
+  children?: React.ReactElement;
+};
+
+export type ToastCloseProps = {
+  asChild?: boolean;
+  onClose?: () => void;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,32 @@
+import { ToastAction } from "./Toast/ToastAction";
+import { ToastClose } from "./Toast/ToastClose";
+import { ToastDescription } from "./Toast/ToastDescription";
+import { ToastProvider } from "./Toast/ToastProvider";
+import { ToastRoot } from "./Toast/ToastRoot";
+import { ToastTitle } from "./Toast/ToastTitle";
+import { ToastViewport } from "./Toast/ToastViewport";
+
+export const Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Action: ToastAction,
+  Close: ToastClose,
+} as const;
+
+export type { ToastRecord } from "./Toast/queue";
+export { dequeueToast, enqueueToast, getVisibleToasts, pruneExpiredToasts } from "./Toast/queue";
+export { useToast } from "./Toast/ToastProvider";
+export type {
+  ToastActionProps,
+  ToastCloseProps,
+  ToastContextValue,
+  ToastDescriptionProps,
+  ToastOptions,
+  ToastProviderProps,
+  ToastRootProps,
+  ToastTitleProps,
+  ToastViewportProps,
+} from "./Toast/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/accordion": ["accordion/src/index.ts"],
+      "@lattice-ui/avatar": ["avatar/src/index.ts"],
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/combobox": ["combobox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/progress": ["progress/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
+      "@lattice-ui/select": ["select/src/index.ts"],
+      "@lattice-ui/slider": ["slider/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/text-field": ["text-field/src/index.ts"],
+      "@lattice-ui/textarea": ["textarea/src/index.ts"],
+      "@lattice-ui/toast": ["toast/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}