@rbxts/react-clean-ui 1.0.5 → 1.0.7

package/out/Components/Interaction/Toast.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { SizeElementProps } from "../../Interfaces";
+import { ToastOptions } from "../../Contexts/";
+interface ToastProps extends ToastOptions {
+    onDismiss: () => void;
+}
+export declare function Toast({ title, description, icon, intent, duration, dismissible, children, onDismiss, }: ToastProps): React.JSX.Element;
+interface ToastContainerProps extends SizeElementProps {
+}
+export declare function ToastContainer(props: ToastContainerProps): React.JSX.Element | undefined;
+export {};

package/out/Components/Interaction/Toast.luau

@@ -0,0 +1,212 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
+local _Surface = TS.import(script, script.Parent.Parent, "Surface")
+local Box = _Surface.Box
+local Icon = _Surface.Icon
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local Container = _Layout.Container
+local FlexItem = _Layout.FlexItem
+local HStack = _Layout.HStack
+local VStack = _Layout.VStack
+local Button = TS.import(script, script.Parent.Parent, "Input").Button
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local _ = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local CleanThemeContext = _.CleanThemeContext
+local useToast = _.useToast
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local SizeHelper = _Helpers.SizeHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local Corners = TS.import(script, script.Parent.Parent, "Decorator").Corners
+local function Toast(_param)
+	local title = _param.title
+	if title == nil then
+		title = nil
+	end
+	local description = _param.description
+	if description == nil then
+		description = nil
+	end
+	local icon = _param.icon
+	if icon == nil then
+		icon = nil
+	end
+	local intent = _param.intent
+	if intent == nil then
+		intent = "primary"
+	end
+	local duration = _param.duration
+	if duration == nil then
+		duration = 3
+	end
+	local dismissible = _param.dismissible
+	if dismissible == nil then
+		dismissible = true
+	end
+	local children = _param.children
+	if children == nil then
+		children = nil
+	end
+	local onDismiss = _param.onDismiss
+	local theme = React.useContext(CleanThemeContext)
+	local dismissRef = React.useRef(onDismiss)
+	local dismissingRef = React.useRef(false)
+	local fadeThreadRef = React.useRef()
+	local statusBarTheme = theme.components.toast.statusBar
+	local progress, progressTween = useTween(1, {
+		duration = duration,
+		easing = "linear",
+	})
+	React.useEffect(function()
+		if statusBarTheme == nil or duration == math.huge or duration <= 0 then
+			return nil
+		end
+		progressTween:setGoal(0)
+	end, { duration, statusBarTheme })
+	local TOAST_FADE_DURATION = theme.components.toast.fadeDuration
+	local groupTransparency, transparencyTween = useTween(0, {
+		duration = TOAST_FADE_DURATION,
+		easing = "quadOut",
+	})
+	React.useEffect(function() end)
+	React.useEffect(function()
+		dismissRef.current = onDismiss
+	end, { onDismiss })
+	local beginDismiss = React.useCallback(function()
+		if dismissingRef.current then
+			return nil
+		end
+		dismissingRef.current = true
+		if TOAST_FADE_DURATION <= 0 then
+			dismissRef.current()
+			return nil
+		end
+		transparencyTween:setGoal(1)
+		fadeThreadRef.current = task.delay(TOAST_FADE_DURATION, function()
+			fadeThreadRef.current = nil
+			dismissRef.current()
+		end)
+	end, { transparencyTween })
+	React.useEffect(function()
+		if duration == math.huge or duration <= 0 then
+			return nil
+		end
+		local dismissThread = task.delay(duration, beginDismiss)
+		return function()
+			task.cancel(dismissThread)
+		end
+	end, { duration, beginDismiss })
+	React.useEffect(function()
+		if TOAST_FADE_DURATION <= 0 then
+			return nil
+		end
+		return function()
+			local fadeThread = fadeThreadRef.current
+			if fadeThread ~= nil then
+				task.cancel(fadeThread)
+			end
+		end
+	end, {})
+	local boxStyles = ColorHelper:getIntentColors(theme, intent, "default", theme.components.toast.intents)
+	local _condition = children ~= nil and children
+	if not _condition then
+		local _exp = icon ~= nil and React.createElement(Icon, {
+			icon = icon,
+			scale = "sm",
+			color = boxStyles.textColor,
+		})
+		local _attributes = {
+			TextColor3 = boxStyles.textColor,
+		}
+		local _condition_1 = title
+		if _condition_1 == nil then
+			_condition_1 = ""
+		end
+		_attributes.text = _condition_1
+		_attributes.typography = TypographyHelper:getTypography(theme, nil, theme.components.toast.header.typography)
+		_condition = React.createElement(VStack, {
+			spacing = "None",
+		}, React.createElement(Container, nil, React.createElement(HStack, {
+			valign = "Center",
+		}, _exp, React.createElement(Text, _attributes), dismissible and (React.createElement(FlexItem, {
+			align = "Right",
+		}, React.createElement(Button, {
+			intent = intent,
+			spacing = "xs",
+			Event = {
+				Activated = beginDismiss,
+			},
+		}, React.createElement(Button.Icon, {
+			intent = intent,
+			icon = "times",
+			scale = "sm",
+		})))))), description ~= nil and (React.createElement(Container, nil, React.createElement(Text, {
+			text = description,
+			TextColor3 = boxStyles.textColor,
+		}))))
+	end
+	return React.createElement("canvasgroup", {
+		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		GroupTransparency = groupTransparency,
+	}, React.createElement(Box, {
+		["border-color"] = boxStyles.borderColor,
+		BackgroundColor3 = boxStyles.backgroundColor,
+		BackgroundTransparency = boxStyles.backgroundTransparency,
+	}, _condition), statusBarTheme ~= nil and React.createElement(React.Fragment, nil, React.createElement("frame", {
+		Size = progress:map(function(value)
+			return UDim2.new(UDim.new(value, 0), SizeHelper:toUDim(statusBarTheme.height))
+		end),
+		BackgroundColor3 = ColorHelper:getIntentColors(theme, intent, "default", statusBarTheme.intents).backgroundColor,
+		BackgroundTransparency = ColorHelper:getIntentColors(theme, intent, "default", statusBarTheme.intents).backgroundTransparency,
+		ZIndex = 2,
+		BorderSizePixel = 0,
+		Position = UDim2.fromScale(0, if statusBarTheme.position == "Top" then 0 else 1),
+		AnchorPoint = Vector2.new(0, if statusBarTheme.position == "Top" then 0 else 1),
+	}), React.createElement(Corners, {
+		radius = theme.components.box.cornerRadius,
+	})))
+end
+local function ToastContainer(props)
+	local _binding = useToast()
+	local toasts = _binding.toasts
+	local dismiss = _binding.dismiss
+	local theme = React.useContext(CleanThemeContext)
+	if #toasts == 0 then
+		return nil
+	end
+	local position = if theme.components.toast.position then SizeHelper:GetPosition(theme.components.toast.position) else UDim2.fromOffset(5, 5)
+	local anchor = if theme.components.toast.position then SizeHelper:GetAnchor(theme.components.toast.position) else Vector2.new(0, 0)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#toasts)
+	local _callback = function(toast)
+		local _attributes = {
+			key = toast.id,
+		}
+		for _k, _v in toast do
+			_attributes[_k] = _v
+		end
+		_attributes.onDismiss = function()
+			return dismiss(toast.id)
+		end
+		return React.createElement(Toast, _attributes)
+	end
+	for _k, _v in toasts do
+		_newValue[_k] = _callback(_v, _k - 1, toasts)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(Container, {
+		Size = SizeHelper:GetSize(props, UDim2.new(SizeHelper:toUDim(theme.components.toast.width), UDim.new(0, 0))),
+		Position = position,
+		AnchorPoint = anchor,
+	}, React.createElement(VStack, {
+		spacing = "xs",
+	}, _newValue))
+end
+return {
+	Toast = Toast,
+	ToastContainer = ToastContainer,
+}

package/out/Contexts/index.d.ts

@@ -4,3 +4,4 @@ export * from './navigation.context';
 export * from './overlay.context';
 export * from './row.context';
 export * from './theme.context';
+export * from './toast.context';

package/out/Contexts/init.luau

@@ -19,4 +19,7 @@ end
 for _k, _v in TS.import(script, script, "theme.context") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "toast.context") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/Contexts/toast.context.d.ts

@@ -0,0 +1,26 @@
+import React from "@rbxts/react";
+import { IconName, Intent } from "../Interfaces";
+export interface ToastOptions {
+    id?: string;
+    title?: string;
+    description?: string;
+    icon?: IconName;
+    intent?: Intent;
+    duration?: number;
+    dismissible?: boolean;
+    children?: React.ReactNode;
+}
+export interface ToastRecord extends ToastOptions {
+    id: string;
+}
+export interface ToastController {
+    show: (options: ToastOptions) => string;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+export interface ToastContextValue extends ToastController {
+    toasts: ToastRecord[];
+}
+export declare const ToastContext: React.Context<ToastContextValue | undefined>;
+export declare function useToast(): ToastContextValue;

package/out/Contexts/toast.context.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ToastContext = React.createContext(nil)
+local function useToast()
+	local context = React.useContext(ToastContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "ToastProvider is missing.")
+	return context
+end
+return {
+	useToast = useToast,
+	ToastContext = ToastContext,
+}

package/out/Helpers/color.helper.d.ts

@@ -1,5 +1,9 @@
 import { CleanTheme, InlineIntentColors, IntentScheme } from "../Theme";
 import { ButtonFlag, Intent } from "../Interfaces";
+type ComponentIntentColors = Partial<Record<Intent, InlineIntentColors>> | Partial<Record<Intent, Partial<IntentScheme>>>;
 export declare class ColorHelper {
-    static getIntentColors(theme: CleanTheme, intent: Intent | undefined, state?: ButtonFlag, componentColors?: Partial<Record<Intent, InlineIntentColors>>): IntentScheme;
+    static getIntentColors(theme: CleanTheme, intent: Intent | undefined, state?: ButtonFlag, componentColors?: ComponentIntentColors): IntentScheme;
+    private static resolveComponentColors;
+    private static isInlineIntentColors;
 }
+export {};

package/out/Helpers/color.helper.luau

@@ -49,52 +49,34 @@ do
 		for _k, _v in _condition_1 do
 			_object[_k] = _v
 		end
-		local _result = componentPrimary
-		if _result ~= nil then
-			_result = _result.default
-		end
-		local _condition_2 = _result
-		if _condition_2 == nil then
-			_condition_2 = {}
-		end
-		for _k, _v in _condition_2 do
-			_object[_k] = _v
-		end
-		local _result_1 = componentPrimary
-		if _result_1 ~= nil then
-			_result_1 = _result_1[state]
-		end
-		local _condition_3 = _result_1
-		if _condition_3 == nil then
-			_condition_3 = {}
-		end
-		for _k, _v in _condition_3 do
-			_object[_k] = _v
-		end
-		local _result_2 = componentMatching
-		if _result_2 ~= nil then
-			_result_2 = _result_2.default
-		end
-		local _condition_4 = _result_2
-		if _condition_4 == nil then
-			_condition_4 = {}
-		end
-		for _k, _v in _condition_4 do
+		for _k, _v in self:resolveComponentColors(componentPrimary, state) do
 			_object[_k] = _v
 		end
-		local _result_3 = componentMatching
-		if _result_3 ~= nil then
-			_result_3 = _result_3[state]
-		end
-		local _condition_5 = _result_3
-		if _condition_5 == nil then
-			_condition_5 = {}
-		end
-		for _k, _v in _condition_5 do
+		for _k, _v in self:resolveComponentColors(componentMatching, state) do
 			_object[_k] = _v
 		end
 		return _object
 	end
+	function ColorHelper:resolveComponentColors(colors, state)
+		if colors == nil then
+			return {}
+		end
+		if self:isInlineIntentColors(colors) then
+			local _object = table.clone((colors.default or {}))
+			setmetatable(_object, nil)
+			for _k, _v in (colors[state] or {}) do
+				_object[_k] = _v
+			end
+			return _object
+		end
+		-- A direct Partial<IntentScheme> has no state variants,
+		-- so the requested state is ignored.
+		return colors
+	end
+	function ColorHelper:isInlineIntentColors(colors)
+		local statefulColors = colors
+		return statefulColors.default ~= nil or statefulColors.hover ~= nil or statefulColors.focus ~= nil
+	end
 end
 return {
 	ColorHelper = ColorHelper,

package/out/Helpers/create-ui-story.d.ts

@@ -5,7 +5,7 @@ declare const controls: {
     Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone">;
 };
 type StoryProps = InferProps<typeof controls>;
-export declare function createStory(render: (props: StoryProps) => React.ReactNode): {
+export declare function createStory(StoryComponent: (props: StoryProps) => React.ReactNode): {
     react: typeof React;
     reactRoblox: typeof ReactRoblox;
     controls: {

package/out/Helpers/create-ui-story.luau

@@ -7,14 +7,11 @@ local DarkTheme = _Theme.DarkTheme
 local DefaultTheme = _Theme.DefaultTheme
 local SandstoneTheme = _Theme.SandstoneTheme
 local Choose = TS.import(script, TS.getModule(script, "@rbxts", "ui-labs").src).Choose
-local _ = TS.import(script, script.Parent.Parent, "Providers")
-local OverlayProvider = _.OverlayProvider
-local ThemeProvider = _.ThemeProvider
-local RegistryProvider = TS.import(script, script.Parent.Parent, "Providers", "registry.provider").RegistryProvider
+local CleanUiProvider = TS.import(script, script.Parent.Parent, "Providers", "app.provider").CleanUiProvider
 local controls = {
 	Theme = Choose({ "Default", "Dark", "Sandstone" }),
 }
-local function createStory(render)
+local function createStory(StoryComponent)
 	return {
 		react = React,
 		reactRoblox = ReactRoblox,
@@ -27,9 +24,11 @@ local function createStory(render)
 			if props.controls.Theme == "Sandstone" then
 				theme = SandstoneTheme
 			end
-			return React.createElement(RegistryProvider, nil, React.createElement(ThemeProvider, {
+			local _attributes = table.clone(props)
+			setmetatable(_attributes, nil)
+			return React.createElement(CleanUiProvider, {
 				theme = theme,
-			}, React.createElement(OverlayProvider, nil, render(props))))
+			}, React.createElement(StoryComponent, _attributes))
 		end,
 	}
 end

package/out/Helpers/index.d.ts

@@ -1,6 +1,5 @@
 export * from './breakpoint.helper';
 export * from './color.helper';
-export * from './create-ui-story';
 export * from './css.helper';
 export * from './gui.helper';
 export * from './size.helper';

package/out/Helpers/init.luau

@@ -7,9 +7,6 @@ end
 for _k, _v in TS.import(script, script, "color.helper") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "create-ui-story") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "css.helper") or {} do
 	exports[_k] = _v
 end

package/out/Providers/app.provider.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+import { CleanTheme } from "../Theme";
+interface CleanUiProviderProps {
+    children?: React.ReactNode;
+    theme: CleanTheme;
+    toasts?: boolean;
+}
+export declare function CleanUiProvider({ children, theme, toasts }: CleanUiProviderProps): React.JSX.Element;
+export {};

package/out/Providers/app.provider.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ToastContainer = TS.import(script, script.Parent.Parent, "Components", "Interaction", "Toast").ToastContainer
+local RegistryProvider = TS.import(script, script.Parent, "registry.provider").RegistryProvider
+local ThemeProvider = TS.import(script, script.Parent, "theme.provider").ThemeProvider
+local OverlayProvider = TS.import(script, script.Parent, "overlay.provider").OverlayProvider
+local ToastProvider = TS.import(script, script.Parent, "toast.provider").ToastProvider
+local function CleanUiProvider(_param)
+	local children = _param.children
+	local theme = _param.theme
+	local toasts = _param.toasts
+	if toasts == nil then
+		toasts = true
+	end
+	return React.createElement(RegistryProvider, nil, React.createElement(ThemeProvider, {
+		theme = theme,
+	}, React.createElement(OverlayProvider, nil, React.createElement(ToastProvider, nil, children, toasts and React.createElement(ToastContainer)))))
+end
+return {
+	CleanUiProvider = CleanUiProvider,
+}

package/out/Providers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './overlay.provider';
 export * from './registry.provider';
 export * from './theme.provider';
+export * from './toast.provider';

package/out/Providers/init.luau

@@ -10,4 +10,7 @@ end
 for _k, _v in TS.import(script, script, "theme.provider") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "toast.provider") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/Providers/toast.provider.d.ts

@@ -0,0 +1,6 @@
+import React from "@rbxts/react";
+interface ToastProviderProps {
+    children?: React.ReactNode;
+}
+export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+export {};

package/out/Providers/toast.provider.luau

@@ -0,0 +1,94 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ToastContext = TS.import(script, script.Parent.Parent, "Contexts", "toast.context").ToastContext
+local nextToastId = 0
+local function generateId()
+	nextToastId += 1
+	return `toast-{nextToastId}`
+end
+local function ToastProvider(props)
+	local toasts, setToasts = React.useState({})
+	local show = React.useCallback(function(options)
+		local _condition = options.id
+		if _condition == nil then
+			_condition = generateId()
+		end
+		local id = _condition
+		setToasts(function(current)
+			local _array = {}
+			local _length = #_array
+			local _currentLength = #current
+			table.move(current, 1, _currentLength, _length + 1, _array)
+			_length += _currentLength
+			local _object = table.clone(options)
+			setmetatable(_object, nil)
+			_object.id = id
+			_array[_length + 1] = _object
+			return _array
+		end)
+		return id
+	end, {})
+	local update = React.useCallback(function(id, options)
+		setToasts(function(current)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue = table.create(#current)
+			local _callback = function(toast)
+				local _result
+				if toast.id == id then
+					local _object = table.clone(toast)
+					setmetatable(_object, nil)
+					for _k, _v in options do
+						_object[_k] = _v
+					end
+					_object.id = id
+					_result = _object
+				else
+					_result = toast
+				end
+				return _result
+			end
+			for _k, _v in current do
+				_newValue[_k] = _callback(_v, _k - 1, current)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			return _newValue
+		end)
+	end, {})
+	local dismiss = React.useCallback(function(id)
+		setToasts(function(current)
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue = {}
+			local _callback = function(toast)
+				return toast.id ~= id
+			end
+			local _length = 0
+			for _k, _v in current do
+				if _callback(_v, _k - 1, current) == true then
+					_length += 1
+					_newValue[_length] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			return _newValue
+		end)
+	end, {})
+	local dismissAll = React.useCallback(function()
+		setToasts({})
+	end, {})
+	local value = React.useMemo(function()
+		return {
+			toasts = toasts,
+			show = show,
+			update = update,
+			dismiss = dismiss,
+			dismissAll = dismissAll,
+		}
+	end, { toasts, show, update, dismiss, dismissAll })
+	return React.createElement(ToastContext.Provider, {
+		value = value,
+	}, props.children)
+end
+return {
+	ToastProvider = ToastProvider,
+}

package/out/Theme/CleanTheme.d.ts

@@ -1,4 +1,4 @@
-import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag } from "../Interfaces/";
+import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag, PositionElementProps } from "../Interfaces/";
 export interface TypographyStyle {
     font: Enum.Font;
     size: Enum.FontSize;
@@ -163,6 +163,23 @@ export interface CleanTheme {
                 aspectRation?: number;
             };
         };
+        toast: {
+            width: CssSize;
+            fadeDuration: number;
+            position?: PositionElementProps;
+            intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
+            header: {
+                typography?: Partial<TypographyStyle>;
+            };
+            body: {
+                typography?: Partial<TypographyStyle>;
+            };
+            statusBar?: {
+                position: "Top" | "Bottom";
+                height: CssSize;
+                intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
+            };
+        };
     };
     icons: Partial<IconSet>;
     iconSize: ScaleSizeValue<number>;

package/out/Theme/themes/dark.theme.luau

@@ -328,6 +328,12 @@ local DarkTheme = {
 				cornerRadius = "100%",
 			},
 		},
+		toast = {
+			width = 300,
+			fadeDuration = 0.5,
+			header = {},
+			body = {},
+		},
 	},
 	icons = {
 		["shopping-cart"] = 112388431913339,

package/out/Theme/themes/default.theme.luau

@@ -386,6 +386,61 @@ local DefaultTheme = {
 				aspectRation = 1,
 			},
 		},
+		toast = {
+			fadeDuration = 0.5,
+			width = 300,
+			position = {
+				right = 5,
+				top = 5,
+			},
+			header = {
+				typography = {
+					weight = Enum.FontWeight.Bold,
+				},
+			},
+			body = {},
+			intents = {
+				primary = {
+					backgroundTransparency = 0,
+				},
+				success = {
+					backgroundColor = Color3.fromHex("#dcf5e8"),
+				},
+				info = {
+					backgroundColor = Color3.fromHex("#b3d7f2"),
+				},
+				warning = {
+					backgroundColor = Color3.fromHex("#f7e1b5"),
+					textColor = Color3.fromHex("#75520f"),
+				},
+				danger = {
+					backgroundColor = Color3.fromHex("#edafaf"),
+					textColor = Color3.fromHex("#731717"),
+				},
+			},
+			statusBar = {
+				height = 4,
+				position = "Bottom",
+				intents = {
+					primary = {
+						backgroundColor = Color3.fromHex("#000000"),
+						backgroundTransparency = 0.5,
+					},
+					success = {
+						backgroundColor = Color3.fromHex("#237D4D"),
+					},
+					info = {
+						backgroundColor = Color3.fromHex("#3187C8"),
+					},
+					warning = {
+						backgroundColor = Color3.fromHex("#C58B1D"),
+					},
+					danger = {
+						backgroundColor = Color3.fromHex("#D64545"),
+					},
+				},
+			},
+		},
 	},
 	icons = {
 		["shopping-cart"] = 112388431913339,

package/out/Theme/themes/sandstone.theme.luau

@@ -328,6 +328,12 @@ local SandstoneTheme = {
 				cornerRadius = 4,
 			},
 		},
+		toast = {
+			width = 300,
+			fadeDuration = 0.5,
+			header = {},
+			body = {},
+		},
 	},
 	icons = {
 		["shopping-cart"] = 112388431913339,

package/out/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./Components";
 export * from "./Helpers";
+export * from "./Helpers/create-ui-story";
 export * from "./Theme";
 export * from "./Interfaces";
 export * from "./Providers";
+export * from "./Providers/app.provider";
 export * from "./Contexts";

package/out/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "Helpers") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Helpers", "create-ui-story") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Theme") or {} do
 	exports[_k] = _v
 end
@@ -16,6 +19,9 @@ end
 for _k, _v in TS.import(script, script, "Providers") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Providers", "app.provider") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Contexts") or {} do
 	exports[_k] = _v
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "main": "out/init.lua",
   "scripts": {
@@ -39,5 +39,13 @@
     "@rbxts/react-roblox": "^17.3.7-ts.2",
     "@rbxts/services": "^1.6.0",
     "@rbxts/ui-labs": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shadercloud/rbxts-react-clean-ui.git"
+  },
+  "homepage": "https://shadercloud.github.io/rbxts-react-clean-ui/",
+  "bugs": {
+    "url": "https://github.com/Shadercloud/rbxts-react-clean-ui/issues"
   }
 }