@rbxts-ui/components 2.1.0 → 3.1.0

package/dist/{IconTileButton.d.ts → buttons/IconTileButton.d.ts}

@@ -1,4 +1,3 @@
-import { type Theme } from "./theme";
 interface IconTileButtonProps {
     readonly icon?: string;
     readonly emoji?: string;
@@ -7,8 +6,7 @@ interface IconTileButtonProps {
     readonly selected?: boolean;
     readonly size?: UDim2;
     readonly enabled?: boolean;
-    readonly theme?: Theme;
 }
-export declare function IconTileButton({ icon, emoji, onClick, label, selected, size, enabled, theme, }: IconTileButtonProps): JSX.Element;
+export declare function IconTileButton({ icon, emoji, onClick, label, selected, size, enabled, }: IconTileButtonProps): JSX.Element;
 export type { IconTileButtonProps };
 //# sourceMappingURL=IconTileButton.d.ts.map

package/dist/{IconTileButton.luau → buttons/IconTileButton.luau}

@@ -1,16 +1,17 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Group = _primitives.Group
+local Image = _primitives.Image
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local Image = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Image
-local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local Group = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Group
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
-local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function IconTileButton(_param)
 	local icon = _param.icon
 	local emoji = _param.emoji
@@ -22,10 +23,7 @@ local function IconTileButton(_param)
 	if enabled == nil then
 		enabled = true
 	end
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local roundness = rem(1)
@@ -42,7 +40,6 @@ local function IconTileButton(_param)
 		backgroundTransparency = 1,
 		size = tileSize,
 		enabled = enabled,
-		theme = theme,
 	}, React.createElement(Frame, {
 		backgroundTransparency = 1,
 		size = UDim2.new(1, 0, 1, 0),

package/dist/{PrimaryButton.d.ts → buttons/PrimaryButton.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface PrimaryButtonProps extends React.PropsWithChildren {
     name?: string;
     readonly onClick?: () => void;
@@ -18,8 +17,7 @@ interface PrimaryButtonProps extends React.PropsWithChildren {
     readonly hasGlow?: boolean;
     readonly hasBackground?: boolean;
     readonly automaticSize?: Enum.AutomaticSize;
-    readonly theme?: Theme;
 }
-export declare function PrimaryButton({ name, onClick, onHover, size, position, anchorPoint, backgroundColor, backgroundTransparency, hasBackground, overlayGradient, overlayTransparency, overlayRotation, layoutOrder, hasShadow, hasOutline, hasGlow, automaticSize, children, theme, }: PrimaryButtonProps): JSX.Element;
+export declare function PrimaryButton({ name, onClick, onHover, size, position, anchorPoint, backgroundColor, backgroundTransparency, hasBackground, overlayGradient, overlayTransparency, overlayRotation, layoutOrder, hasShadow, hasOutline, hasGlow, automaticSize, children, }: PrimaryButtonProps): JSX.Element;
 export type { PrimaryButtonProps };
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/{PrimaryButton.luau → buttons/PrimaryButton.luau}

@@ -4,11 +4,11 @@ local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pr
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local Outline = TS.import(script, script.Parent, "Outline").Outline
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function PrimaryButton(_param)
 	local name = _param.name
 	local onClick = _param.onClick
@@ -46,10 +46,7 @@ local function PrimaryButton(_param)
 	end
 	local automaticSize = _param.automaticSize
 	local children = _param.children
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	return React.createElement(ReactiveButton, {
@@ -68,7 +65,6 @@ local function PrimaryButton(_param)
 		size = size,
 		position = position,
 		layoutOrder = layoutOrder,
-		theme = theme,
 	}, if hasBackground then (React.createElement(Frame, {
 		backgroundColor = backgroundColor,
 		cornerRadius = UDim.new(0, rem(1)),
@@ -81,7 +77,6 @@ local function PrimaryButton(_param)
 	}))) else nil, if hasOutline then React.createElement(Outline, {
 		cornerRadius = UDim.new(0, rem(1)),
 		innerTransparency = 0,
-		theme = theme,
 	}) else nil, children)
 end
 return {

package/dist/{ReactiveButton.d.ts → buttons/ReactiveButton.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface ReactiveButtonProps extends React.PropsWithChildren {
     name?: string;
     onClick?: () => void;
@@ -27,8 +26,7 @@ interface ReactiveButtonProps extends React.PropsWithChildren {
     change?: React.InstanceChangeEvent<TextButton>;
     fill?: boolean;
     automaticSize?: Enum.AutomaticSize;
-    theme?: Theme;
 }
-export declare function ReactiveButton({ name, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onHover, onPress, enabled, size, position, anchorPoint, backgroundColor, backgroundTransparency, cornerRadius, layoutOrder, zIndex, animatePosition, animatePositionStrength, animatePositionDirection, animateSize, animateSizeStrength, event, change, children, fill, automaticSize, theme, }: ReactiveButtonProps): JSX.Element;
+export declare function ReactiveButton({ name, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onHover, onPress, enabled, size, position, anchorPoint, backgroundColor, backgroundTransparency, cornerRadius, layoutOrder, zIndex, animatePosition, animatePositionStrength, animatePositionDirection, animateSize, animateSizeStrength, event, change, children, fill, automaticSize, }: ReactiveButtonProps): JSX.Element;
 export type { ReactiveButtonProps };
 //# sourceMappingURL=ReactiveButton.d.ts.map

package/dist/{ReactiveButton.luau → buttons/ReactiveButton.luau}

@@ -1,5 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local blend = _pretty_react_hooks.blend
 local composeBindings = _pretty_react_hooks.composeBindings
@@ -7,12 +9,9 @@ local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
 local Button = TS.import(script, script.Parent, "Button").Button
-local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local useButtonAnimation = TS.import(script, script.Parent, "use-button-animation").useButtonAnimation
-local useButtonState = TS.import(script, script.Parent, "use-button-state").useButtonState
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local useButtonAnimation = TS.import(script, script.Parent.Parent, "hooks", "use-button-animation").useButtonAnimation
+local useButtonState = TS.import(script, script.Parent.Parent, "hooks", "use-button-state").useButtonState
 local function ReactiveButton(_param)
 	local name = _param.name
 	local onClick = _param.onClick
@@ -68,14 +67,10 @@ local function ReactiveButton(_param)
 		fill = false
 	end
 	local automaticSize = _param.automaticSize
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
 	local rem = useRem()
 	local sizeAnimation, sizeMotion = useMotion(0)
 	local press, hover, buttonEvents = useButtonState(enabled)
-	local animation = useButtonAnimation(press, hover, theme)
+	local animation = useButtonAnimation(press, hover)
 	useUpdateEffect(function()
 		if press then
 			sizeMotion:spring(-0.1, {

package/dist/{TextButton.d.ts → buttons/TextButton.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 export declare enum TextButtonVariant {
     Green = 0,
     Red = 1,
@@ -25,8 +24,7 @@ interface TextButtonProps extends React.PropsWithChildren {
     readonly radius?: number;
     readonly textSize?: number;
     readonly textScaled?: boolean;
-    readonly theme?: Theme;
 }
-export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, theme, }: TextButtonProps): JSX.Element;
+export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, }: TextButtonProps): JSX.Element;
 export type { TextButtonProps };
 //# sourceMappingURL=TextButton.d.ts.map

package/dist/{TextButton.luau → buttons/TextButton.luau}

@@ -1,15 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local Outline = TS.import(script, script.Parent, "Outline").Outline
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
-local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
 local TextButtonVariant
 do
 	local _inverse = {}
@@ -43,10 +44,7 @@ local function TextButton(_param)
 	local children = _param.children
 	local textSize = _param.textSize
 	local textScaled = _param.textScaled
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local colorVariant = {
@@ -78,7 +76,6 @@ local function TextButton(_param)
 		innerTransparency = if isDisabled then 1 else 0,
 		innerColor = color,
 		innerThickness = 1,
-		theme = theme,
 	})
 	local _attributes = {
 		key = "mainText",
@@ -116,7 +113,6 @@ local function TextButton(_param)
 		position = position,
 		layoutOrder = layoutOrder,
 		fill = true,
-		theme = theme,
 	}, _exp, _exp_1, React.createElement(Text, _attributes), children)
 end
 return {

package/dist/display/AlertBox.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+export type AlertBoxVariant = "warning" | "info";
+interface AlertBoxProps {
+    variant: AlertBoxVariant;
+    text: string | React.Binding<string>;
+    tooltipText?: string | React.Binding<string>;
+    name?: string;
+}
+export declare function AlertBox(props: AlertBoxProps): JSX.Element;
+export {};
+//# sourceMappingURL=AlertBox.d.ts.map

package/dist/display/AlertBox.luau

@@ -0,0 +1,56 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local InfoIcon = TS.import(script, script.Parent.Parent, "icons", "InfoIcon").InfoIcon
+local WarningIcon = TS.import(script, script.Parent.Parent, "icons", "WarningIcon").WarningIcon
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local function AlertBox(props)
+	local rem = useRem()
+	local variantColor = if props.variant == "warning" then defaultTheme.palette.yellow else defaultTheme.palette.blue
+	local containerPadding = rem(2)
+	return React.createElement(Frame, {
+		name = props.name,
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		backgroundColor = variantColor,
+		backgroundTransparency = 0.95,
+		cornerRadius = UDim.new(0, rem(1)),
+	}, React.createElement(Outline, {
+		innerColor = variantColor,
+		innerTransparency = 0.85,
+		outerTransparency = 0.9,
+		cornerRadius = UDim.new(0, rem(1)),
+	}), React.createElement(HStack, {
+		spacing = rem(2),
+		padding = containerPadding,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+	}, if props.variant == "warning" then (React.createElement(WarningIcon, {
+		tooltipText = props.tooltipText,
+		portalRef = nil,
+	})) else (React.createElement(InfoIcon, {
+		tooltipText = props.tooltipText,
+		portalRef = nil,
+	})), React.createElement(Text, {
+		text = props.text,
+		textColor = defaultTheme.palette.crust,
+		textSize = rem(3),
+		size = UDim2.new(0, 0, 0, 0),
+		textWrapped = true,
+		textXAlignment = "Left",
+		textYAlignment = "Center",
+		automaticSize = Enum.AutomaticSize.Y,
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))))
+end
+return {
+	AlertBox = AlertBox,
+}

package/dist/display/AlertBox.story.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+import { InferFusionProps } from "@rbxts/ui-labs";
+declare const controls: {};
+declare const story: {
+    react: typeof React;
+    reactRoblox: typeof ReactRoblox;
+    controls: {};
+    story: (_props: InferFusionProps<typeof controls>) => JSX.Element;
+};
+export = story;
+//# sourceMappingURL=AlertBox.story.d.ts.map

package/dist/display/AlertBox.story.luau

@@ -0,0 +1,37 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local AlertBox = TS.import(script, script.Parent, "AlertBox").AlertBox
+local RemProvider = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).RemProvider
+local StoryComponent = function()
+	local rem = useRem()
+	return React.createElement(RemProvider, {
+		baseRem = 16,
+		maximumRem = 32,
+	}, React.createElement(VStack, {
+		size = UDim2.new(1, 0, 1, 0),
+		spacing = rem(4),
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+	}, React.createElement(AlertBox, {
+		variant = "warning",
+		text = "Warning: Please review the details",
+		tooltipText = "Some warning details to show in tooltip.",
+	}), React.createElement(AlertBox, {
+		variant = "info",
+		text = "This is an informational message.",
+	})))
+end
+local controls = {}
+local story = {
+	react = React,
+	reactRoblox = ReactRoblox,
+	controls = controls,
+	story = function(_props)
+		return React.createElement(StoryComponent)
+	end,
+}
+return story

package/dist/{Checkmark.luau → display/Checkmark.luau}

@@ -3,7 +3,7 @@ local TS = _G[script]
 local lerpBinding = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).lerpBinding
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local function Checkmark(_param)
 	local checked = _param.checked
 	local color = _param.color

package/dist/{Legend.luau → display/Legend.luau}

@@ -1,7 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
 local HStack = _layout.HStack

package/dist/{PillText.d.ts → display/PillText.d.ts}

@@ -1,7 +1,5 @@
 import { type TextProps } from "@rbxts-ui/primitives";
-import { type Theme } from "./theme";
 interface PillTextProps extends TextProps {
-    theme?: Theme;
 }
 export declare function PillText(props: PillTextProps): JSX.Element;
 export type { PillTextProps };

package/dist/{PillText.luau → display/PillText.luau}

@@ -2,13 +2,13 @@
 local TS = _G[script]
 local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local omit = TS.import(script, TS.getModule(script, "@rbxts-ui", "utils").dist).omit
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local Outline = TS.import(script, script.Parent, "Outline").Outline
-local Padding = TS.import(script, script.Parent, "Padding").Padding
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local WIDTH = 3
 local HEIGHT = 2
 local function PillText(props)
@@ -19,11 +19,8 @@ local function PillText(props)
 	local name = _binding.name
 	local zIndex = _binding.zIndex
 	local anchorPoint = _binding.anchorPoint
-	local theme = _binding.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
-	local textProps = Object.assign({}, omit(props, { "position", "name", "text", "textColor", "zIndex", "anchorPoint", "theme" }))
+	local theme = defaultTheme
+	local textProps = Object.assign({}, omit(props, { "position", "name", "text", "textColor", "zIndex", "anchorPoint" }))
 	local rem = useRem()
 	local cornerRadius = UDim.new(0, rem(3))
 	local _exp = React.createElement(Frame, {
@@ -39,7 +36,6 @@ local function PillText(props)
 		innerColor = theme.palette.black,
 		outerTransparency = 0,
 		outerColor = theme.palette.black,
-		theme = theme,
 	})
 	local _attributes = {
 		text = `{text}`,

package/dist/error-handler/ErrorHandler.d.ts

@@ -0,0 +1,3 @@
+import React from "@rbxts/react";
+export declare function ErrorHandler({ children }: React.PropsWithChildren): JSX.Element;
+//# sourceMappingURL=ErrorHandler.d.ts.map

package/dist/error-handler/ErrorHandler.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ErrorBoundary = TS.import(script, script.Parent.Parent, "utils", "ErrorBoundary").ErrorBoundary
+local ErrorPage = TS.import(script, script.Parent, "ErrorPage").ErrorPage
+local function ErrorHandler(_param)
+	local children = _param.children
+	return React.createElement(ErrorBoundary, {
+		fallback = function(message)
+			return React.createElement(ErrorPage, {
+				message = message,
+			})
+		end,
+	}, children)
+end
+return {
+	ErrorHandler = ErrorHandler,
+}

package/dist/error-handler/ErrorPage.d.ts

@@ -0,0 +1,6 @@
+interface ErrorPageProps {
+    readonly message: unknown;
+}
+export declare function ErrorPage({ message }: ErrorPageProps): JSX.Element;
+export {};
+//# sourceMappingURL=ErrorPage.d.ts.map

package/dist/error-handler/ErrorPage.luau

@@ -0,0 +1,144 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Layer = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).Layer
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Group = _primitives.Group
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local PrimaryButton = TS.import(script, script.Parent.Parent, "buttons", "PrimaryButton").PrimaryButton
+local TextField = TS.import(script, script.Parent.Parent, "form", "TextField").TextField
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function ErrorPage(_param)
+	local message = _param.message
+	local rem = useRem()
+	local index = 0
+	local _exp = React.createElement("uilistlayout", {
+		FillDirection = "Vertical",
+		VerticalAlignment = "Center",
+		HorizontalAlignment = "Center",
+		SortOrder = "LayoutOrder",
+	})
+	local _attributes = {
+		text = "⚠️",
+		textSize = rem(5),
+		size = UDim2.new(0, rem(5), 0, rem(5)),
+	}
+	local _original = index
+	index += 1
+	_attributes.layoutOrder = _original
+	local _exp_1 = React.createElement(Text, _attributes)
+	local _attributes_1 = {
+		font = defaultTheme.fonts.inter.bold,
+		text = "Oh Noes!",
+		textColor = defaultTheme.palette.text,
+		textSize = rem(3),
+		textAutoResize = "XY",
+	}
+	local _original_1 = index
+	index += 1
+	_attributes_1.layoutOrder = _original_1
+	local _exp_2 = React.createElement(Text, _attributes_1)
+	local _attributes_2 = {
+		size = UDim2.new(0, 0, 0, rem(2)),
+	}
+	local _original_2 = index
+	index += 1
+	_attributes_2.layoutOrder = _original_2
+	local _exp_3 = React.createElement(Group, _attributes_2)
+	local _attributes_3 = {
+		font = defaultTheme.fonts.inter.regular,
+		text = "Something went wrong, and we were unable to recover.",
+		textColor = defaultTheme.palette.text,
+		textSize = rem(1.5),
+		textAutoResize = "XY",
+	}
+	local _original_3 = index
+	index += 1
+	_attributes_3.layoutOrder = _original_3
+	local _exp_4 = React.createElement(Text, _attributes_3)
+	local _attributes_4 = {
+		size = UDim2.new(0, 0, 0, rem(0.5)),
+	}
+	local _original_4 = index
+	index += 1
+	_attributes_4.layoutOrder = _original_4
+	local _exp_5 = React.createElement(Group, _attributes_4)
+	local _attributes_5 = {
+		font = defaultTheme.fonts.inter.regular,
+		text = "Please send this error to the developers, and try reconnecting:",
+		textColor = defaultTheme.palette.text,
+		textSize = rem(1.5),
+		textAutoResize = "XY",
+	}
+	local _original_5 = index
+	index += 1
+	_attributes_5.layoutOrder = _original_5
+	local _exp_6 = React.createElement(Text, _attributes_5)
+	local _attributes_6 = {
+		size = UDim2.new(0, 0, 0, rem(2)),
+	}
+	local _original_6 = index
+	index += 1
+	_attributes_6.layoutOrder = _original_6
+	local _exp_7 = React.createElement(Group, _attributes_6)
+	local _attributes_7 = {
+		clearTextOnFocus = false,
+		textEditable = false,
+		font = defaultTheme.fonts.roboto.regular,
+		text = `{message}`,
+		textColor = defaultTheme.palette.red,
+		textSize = rem(1.5),
+		textAutoResize = "XY",
+		textXAlignment = "Left",
+		maxVisibleGraphemes = 512,
+		backgroundColor = defaultTheme.palette.crust,
+		backgroundTransparency = 0,
+		cornerRadius = UDim.new(0, rem(1.5)),
+	}
+	local _original_7 = index
+	index += 1
+	_attributes_7.layoutOrder = _original_7
+	local _exp_8 = React.createElement(TextField, _attributes_7, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, rem(2)),
+		PaddingRight = UDim.new(0, rem(2)),
+		PaddingTop = UDim.new(0, rem(2)),
+		PaddingBottom = UDim.new(0, rem(2)),
+	}), React.createElement("uistroke", {
+		Color = defaultTheme.palette.red,
+		Transparency = 0.3,
+		Thickness = 1,
+		ApplyStrokeMode = "Border",
+	}))
+	local _attributes_8 = {
+		size = UDim2.new(0, 0, 0, rem(2)),
+	}
+	local _original_8 = index
+	index += 1
+	_attributes_8.layoutOrder = _original_8
+	local _exp_9 = React.createElement(Group, _attributes_8)
+	local _attributes_9 = {
+		onClick = TS.async(function()
+			warn("Reconnecting...")
+		end),
+		overlayGradient = ColorSequence.new(defaultTheme.palette.blue, defaultTheme.palette.blueishColor),
+		size = UDim2.new(0, rem(12), 0, rem(5)),
+	}
+	local _original_9 = index
+	index += 1
+	_attributes_9.layoutOrder = _original_9
+	return React.createElement(Layer, nil, React.createElement(Frame, {
+		backgroundColor = defaultTheme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+	}, _exp, _exp_1, _exp_2, _exp_3, _exp_4, _exp_5, _exp_6, _exp_7, _exp_8, _exp_9, React.createElement(PrimaryButton, _attributes_9, React.createElement(Text, {
+		font = defaultTheme.fonts.inter.medium,
+		text = "Reconnect →",
+		textColor = defaultTheme.palette.text,
+		textSize = rem(1.5),
+		size = UDim2.new(1, 0, 1, 0),
+	}))))
+end
+return {
+	ErrorPage = ErrorPage,
+}

package/dist/error-handler/index.d.ts

@@ -0,0 +1,3 @@
+export { ErrorHandler } from "./ErrorHandler";
+export { ErrorPage } from "./ErrorPage";
+//# sourceMappingURL=index.d.ts.map

package/dist/error-handler/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ErrorHandler = TS.import(script, script, "ErrorHandler").ErrorHandler
+exports.ErrorPage = TS.import(script, script, "ErrorPage").ErrorPage
+return exports

package/dist/{Checkbox.d.ts → form/Checkbox.d.ts}

@@ -1,4 +1,3 @@
-import { type Theme } from "./theme";
 interface CheckboxProps {
     checked: boolean;
     onChecked: (checked: boolean) => void;
@@ -6,8 +5,7 @@ interface CheckboxProps {
     variant?: "default" | "large" | "small";
     position?: UDim2;
     disabled?: boolean;
-    theme?: Theme;
 }
-export declare function Checkbox({ checked, onChecked, text, variant, position, disabled, theme, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked, onChecked, text, variant, position, disabled, }: CheckboxProps): JSX.Element;
 export type { CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map