@rbxts/centurion-ui 1.0.0-dev-284510d

package/out/components/ui/shortcut-group.lua

@@ -0,0 +1,100 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _util = TS.import(script, TS.getModule(script, "@rbxts", "centurion").out.client.util)
+local getModifierKeyName = _util.getModifierKeyName
+local getShortcutKeycodes = _util.getShortcutKeycodes
+local isModifierKey = _util.isModifierKey
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useContext = _react.useContext
+local useState = _react.useState
+local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
+local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local Badge = TS.import(script, script.Parent.Parent, "suggestions", "badge").Badge
+local Frame = TS.import(script, script.Parent, "frame").Frame
+local Padding = TS.import(script, script.Parent, "padding").Padding
+local function Key(props)
+	local options = props.options
+	local isModifier = isModifierKey(props.keyCode)
+	local size, setSize = useState(UDim2.new(0, 24, 0, 24))
+	return React.createElement(Frame, {
+		backgroundTransparency = 1,
+		layoutOrder = if isModifier then -1 else 0,
+		automaticSize = "XY",
+	}, React.createElement(Badge, {
+		color = if isModifier then options.palette.highlight else options.palette.surface,
+		text = if isModifier then getModifierKeyName(props.keyCode) else props.keyCode.Name,
+		textColor = if isModifier then options.palette.text else options.palette.text,
+		textSize = 16,
+		size = size,
+		onTextBoundsChange = function(textBounds)
+			setSize(UDim2.new(0, math.max(24, textBounds.X + 12), 0, 24))
+		end,
+		backgroundTransparency = if isModifier then 0.5 else 0,
+	}, if isModifier then (React.createElement("uistroke", {
+		Color = options.palette.highlight,
+		Thickness = 1,
+	})) else (React.createElement("uistroke", {
+		Color = options.palette.subtext,
+		Thickness = 1,
+	}))))
+end
+local function ShortcutGroup(props)
+	local options = useContext(OptionsContext)
+	local px = usePx()
+	local _exp = React.createElement(Padding, {
+		all = UDim.new(0, px(8)),
+	})
+	local _exp_1 = React.createElement("uilistlayout", {
+		HorizontalAlignment = "Left",
+		FillDirection = "Vertical",
+		Padding = UDim.new(0, 8),
+	})
+	local _result = props.shortcuts
+	if _result ~= nil then
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#_result)
+		local _callback = function(shortcut, index)
+			local shortcuts = getShortcutKeycodes(shortcut)
+			local _exp_2 = React.createElement("uilistlayout", {
+				FillDirection = "Horizontal",
+				SortOrder = "LayoutOrder",
+				Padding = UDim.new(0, 8),
+			})
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#shortcuts)
+			local _callback_1 = function(key)
+				return React.createElement(Key, {
+					options = options,
+					keyCode = key,
+					key = string.lower(key.Name),
+				})
+			end
+			for _k, _v in shortcuts do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, shortcuts)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			return React.createElement(Frame, {
+				automaticSize = "XY",
+				backgroundTransparency = 1,
+				key = `shortcut-{index}`,
+			}, _exp_2, _newValue_1)
+		end
+		for _k, _v in _result do
+			_newValue[_k] = _callback(_v, _k - 1, _result)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = _newValue
+	end
+	return React.createElement(Frame, {
+		backgroundTransparency = options.backgroundTransparency,
+		backgroundColor = options.palette.background,
+		size = UDim2.new(1, 0, 1, 0),
+		position = UDim2.new(1, px(16), 0, -px(8)),
+		cornerRadius = UDim.new(0, px(8)),
+		automaticSize = "XY",
+	}, _exp, _exp_1, _result)
+end
+return {
+	ShortcutGroup = ShortcutGroup,
+}

package/out/components/ui/text-field.d.ts

@@ -0,0 +1,13 @@
+import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import React from "@rbxts/react";
+import { TextProps } from "./text";
+interface TextFieldProps extends TextProps<TextBox> {
+    text?: BindingOrValue<string>;
+    placeholderText?: BindingOrValue<string>;
+    placeholderColor?: BindingOrValue<Color3>;
+    clearTextOnFocus?: BindingOrValue<boolean>;
+    multiLine?: BindingOrValue<boolean>;
+    textEditable?: BindingOrValue<boolean>;
+}
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextBox>>;
+export {};

package/out/components/ui/text-field.lua

@@ -0,0 +1,53 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local forwardRef = _react.forwardRef
+local useContext = _react.useContext
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local TextField = forwardRef(function(props, ref)
+	local options = useContext(OptionsContext)
+	local _attributes = {
+		ref = ref,
+		PlaceholderText = props.placeholderText,
+		PlaceholderColor3 = props.placeholderColor,
+		ClearTextOnFocus = props.clearTextOnFocus,
+		MultiLine = props.multiLine,
+		TextEditable = props.textEditable,
+		Font = Enum.Font.Unknown,
+		FontFace = props.font or options.font.regular,
+		Text = props.text,
+		TextColor3 = props.textColor,
+		TextSize = props.textSize,
+		TextTransparency = props.textTransparency,
+		TextTruncate = props.textTruncate,
+		TextWrapped = props.textWrapped,
+		TextXAlignment = props.textXAlignment,
+		TextYAlignment = props.textYAlignment,
+		TextScaled = props.textScaled,
+		RichText = props.richText,
+		AutomaticSize = props.textAutoResize,
+		Size = props.size,
+		Position = props.position,
+		AnchorPoint = props.anchorPoint,
+		BackgroundColor3 = props.backgroundColor,
+	}
+	local _condition = props.backgroundTransparency
+	if _condition == nil then
+		_condition = 1
+	end
+	_attributes.BackgroundTransparency = _condition
+	_attributes.ClipsDescendants = props.clipsDescendants
+	_attributes.Visible = props.visible
+	_attributes.ZIndex = props.zIndex
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.BorderSizePixel = 0
+	_attributes.Event = props.event or {}
+	_attributes.Change = props.change or {}
+	return React.createElement("textbox", _attributes, props.cornerRadius and React.createElement("uicorner", {
+		CornerRadius = props.cornerRadius,
+	}), props.children)
+end)
+return {
+	TextField = TextField,
+}

package/out/components/ui/text.d.ts

@@ -0,0 +1,20 @@
+import { BindingOrValue } from "@rbxts/pretty-react-hooks";
+import React from "@rbxts/react";
+import { FrameProps } from "./frame";
+export interface TextProps<T extends Instance = TextLabel> extends FrameProps<T> {
+    font?: Font;
+    text?: BindingOrValue<string>;
+    textColor?: BindingOrValue<Color3>;
+    textSize?: BindingOrValue<number>;
+    textTransparency?: BindingOrValue<number>;
+    textWrapped?: BindingOrValue<boolean>;
+    textXAlignment?: React.InferEnumNames<Enum.TextXAlignment>;
+    textYAlignment?: React.InferEnumNames<Enum.TextYAlignment>;
+    textTruncate?: React.InferEnumNames<Enum.TextTruncate>;
+    textScaled?: BindingOrValue<boolean>;
+    textHeight?: BindingOrValue<number>;
+    textAutoResize?: "X" | "Y" | "XY";
+    richText?: BindingOrValue<boolean>;
+    maxVisibleGraphemes?: BindingOrValue<number>;
+}
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<TextLabel>, "ref"> & React.RefAttributes<TextLabel>>;

package/out/components/ui/text.lua

@@ -0,0 +1,55 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local useContext = _react.useContext
+local usePx = TS.import(script, script.Parent.Parent.Parent, "hooks", "use-px").usePx
+local OptionsContext = TS.import(script, script.Parent.Parent.Parent, "providers", "options-provider").OptionsContext
+local Text = forwardRef(function(props, ref)
+	local px = usePx()
+	local options = useContext(OptionsContext)
+	local _attributes = {
+		ref = ref,
+		Font = Enum.Font.Unknown,
+		FontFace = props.font or options.font.regular,
+		Text = props.text,
+		TextColor3 = props.textColor,
+	}
+	local _condition = props.textSize
+	if _condition == nil then
+		_condition = px(16)
+	end
+	_attributes.TextSize = _condition
+	_attributes.TextTransparency = props.textTransparency
+	_attributes.TextWrapped = props.textWrapped
+	_attributes.TextXAlignment = props.textXAlignment
+	_attributes.TextYAlignment = props.textYAlignment
+	_attributes.TextTruncate = props.textTruncate
+	_attributes.TextScaled = props.textScaled
+	_attributes.LineHeight = props.textHeight
+	_attributes.RichText = props.richText
+	_attributes.MaxVisibleGraphemes = props.maxVisibleGraphemes
+	_attributes.Size = props.size
+	_attributes.AutomaticSize = props.textAutoResize
+	_attributes.Position = props.position
+	_attributes.AnchorPoint = props.anchorPoint
+	_attributes.BackgroundColor3 = props.backgroundColor
+	local _condition_1 = props.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.ClipsDescendants = props.clipsDescendants
+	_attributes.Visible = props.visible
+	_attributes.ZIndex = props.zIndex
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.Change = props.change or {}
+	_attributes.Event = props.event or {}
+	return React.createElement("textlabel", _attributes, props.cornerRadius and React.createElement("uicorner", {
+		CornerRadius = props.cornerRadius,
+	}), props.children)
+end)
+return {
+	Text = Text,
+}

package/out/constants/options.d.ts

@@ -0,0 +1,2 @@
+import { InterfaceOptions } from "../types";
+export declare const DEFAULT_INTERFACE_OPTIONS: InterfaceOptions;

package/out/constants/options.lua

@@ -0,0 +1,19 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local DefaultPalette = TS.import(script, script.Parent.Parent, "palette").DefaultPalette
+local DEFAULT_INTERFACE_OPTIONS = {
+	displayOrder = 1000,
+	activationKeys = { Enum.KeyCode.F2 },
+	hideOnLostFocus = true,
+	font = {
+		regular = Font.new("rbxassetid://16658221428"),
+		medium = Font.new("rbxassetid://16658221428", Enum.FontWeight.Medium),
+		bold = Font.new("rbxassetid://16658221428", Enum.FontWeight.Bold),
+	},
+	palette = DefaultPalette.mocha,
+	backgroundTransparency = 0.2,
+	showShortcutSuggestions = true,
+}
+return {
+	DEFAULT_INTERFACE_OPTIONS = DEFAULT_INTERFACE_OPTIONS,
+}

package/out/constants/springs.d.ts

@@ -0,0 +1,19 @@
+import { SpringOptions } from "@rbxts/ripple";
+export declare const springs: {
+    bubbly: {
+        tension: number;
+        friction: number;
+    };
+    responsive: {
+        tension: number;
+    };
+    gentle: {
+        tension: number;
+        friction: number;
+    };
+    default: SpringOptions;
+    wobbly: SpringOptions;
+    stiff: SpringOptions;
+    slow: SpringOptions;
+    molasses: SpringOptions;
+};

package/out/constants/springs.lua

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple")).config
+local _object = table.clone(config.spring)
+setmetatable(_object, nil)
+_object.bubbly = {
+	tension = 400,
+	friction = 14,
+}
+_object.responsive = {
+	tension = 400,
+}
+_object.gentle = {
+	tension = 250,
+	friction = 30,
+}
+local springs = _object
+return {
+	springs = springs,
+}

package/out/constants/text.d.ts

@@ -0,0 +1,3 @@
+export declare const HISTORY_TEXT_SIZE = 18;
+export declare const SUGGESTION_TITLE_TEXT_SIZE = 26;
+export declare const SUGGESTION_TEXT_SIZE = 20;

package/out/constants/text.lua

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local HISTORY_TEXT_SIZE = 18
+local SUGGESTION_TITLE_TEXT_SIZE = 26
+local SUGGESTION_TEXT_SIZE = 20
+return {
+	HISTORY_TEXT_SIZE = HISTORY_TEXT_SIZE,
+	SUGGESTION_TITLE_TEXT_SIZE = SUGGESTION_TITLE_TEXT_SIZE,
+	SUGGESTION_TEXT_SIZE = SUGGESTION_TEXT_SIZE,
+}

package/out/constants/util.d.ts

@@ -0,0 +1 @@
+export declare const IS_EDIT: boolean;

package/out/constants/util.lua

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local RunService = TS.import(script, TS.getModule(script, "@rbxts", "services")).RunService
+local IS_EDIT = RunService:IsStudio() and not RunService:IsRunning()
+return {
+	IS_EDIT = IS_EDIT,
+}

package/out/hooks/use-motion.d.ts

@@ -0,0 +1,4 @@
+import { Binding } from "@rbxts/react";
+import { Motion, MotionGoal } from "@rbxts/ripple";
+export declare function useMotion(initialValue: number): LuaTuple<[Binding<number>, Motion]>;
+export declare function useMotion<T extends MotionGoal>(initialValue: T): LuaTuple<[Binding<T>, Motion<T>]>;

package/out/hooks/use-motion.lua

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local useEventListener = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useEventListener
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBinding = _react.useBinding
+local useMemo = _react.useMemo
+local createMotion = TS.import(script, TS.getModule(script, "@rbxts", "ripple")).createMotion
+local RunService = TS.import(script, TS.getModule(script, "@rbxts", "services")).RunService
+local function useMotion(initialValue)
+	local motion = useMemo(function()
+		return createMotion(initialValue)
+	end, {})
+	local binding, setValue = useBinding(initialValue)
+	useEventListener(RunService.Heartbeat, function(delta)
+		local value = motion:step(delta)
+		if value ~= binding:getValue() then
+			setValue(value)
+		end
+	end)
+	return binding, motion
+end
+return {
+	useMotion = useMotion,
+}

package/out/hooks/use-px.d.ts

@@ -0,0 +1,24 @@
+interface ScaleFunction {
+    /**
+     * Scales `pixels` based on the current viewport size and rounds the result.
+     */
+    (pixels: number): number;
+    /**
+     * Scales `pixels` and rounds the result to the nearest even number.
+     */
+    even: (pixels: number) => number;
+    /**
+     * Scales a number based on the current viewport size without rounding.
+     */
+    scale: (percent: number) => number;
+    /**
+     * Scales `pixels` and rounds the result down.
+     */
+    floor: (pixels: number) => number;
+    /**
+     * Scales `pixels` and rounds the result up.
+     */
+    ceil: (pixels: number) => number;
+}
+export declare function usePx(): ScaleFunction;
+export {};

package/out/hooks/use-px.lua

@@ -0,0 +1,56 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local useCamera = _pretty_react_hooks.useCamera
+local useDebounceState = _pretty_react_hooks.useDebounceState
+local useEventListener = _pretty_react_hooks.useEventListener
+local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
+local BASE_RESOLUTION = Vector2.new(1280, 832)
+local MIN_SCALE = 0.75
+local DOMINANT_AXIS = 0.5
+--[[
+	*
+	 * @see https://discord.com/channels/476080952636997633/476080952636997635/1146857136358432900
+	 
+]]
+local function calculateScale(viewport)
+	local width = math.log(viewport.X / BASE_RESOLUTION.X, 2)
+	local height = math.log(viewport.Y / BASE_RESOLUTION.Y, 2)
+	local centered = width + (height - width) * DOMINANT_AXIS
+	return math.max(2 ^ centered, MIN_SCALE)
+end
+local function usePx()
+	local camera = useCamera()
+	local scale, setScale = useDebounceState(calculateScale(camera.ViewportSize), {
+		wait = 0.2,
+		leading = true,
+	})
+	useEventListener(camera:GetPropertyChangedSignal("ViewportSize"), function()
+		setScale(calculateScale(camera.ViewportSize))
+	end)
+	return useMemo(function()
+		local api = {
+			even = function(value)
+				return math.round(value * scale * 0.5) * 2
+			end,
+			scale = function(value)
+				return value * scale
+			end,
+			floor = function(value)
+				return math.floor(value * scale)
+			end,
+			ceil = function(value)
+				return math.ceil(value * scale)
+			end,
+		}
+		setmetatable(api, {
+			__call = function(_, value)
+				return math.round(value * scale)
+			end,
+		})
+		return api
+	end, { scale })
+end
+return {
+	usePx = usePx,
+}

package/out/hooks/use-store.d.ts

@@ -0,0 +1,3 @@
+import { UseProducerHook } from "@rbxts/react-reflex";
+import { RootStore } from "../store";
+export declare const useStore: UseProducerHook<RootStore>;

package/out/hooks/use-store.lua

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local useProducer = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).useProducer
+local useStore = useProducer
+return {
+	useStore = useStore,
+}

package/out/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./app";
+export * from "./palette";

package/out/init.lua

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "app") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "palette") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/palette.d.ts

@@ -0,0 +1,56 @@
+export interface InterfacePalette {
+    background: Color3;
+    surface: Color3;
+    text: Color3;
+    subtext: Color3;
+    highlight: Color3;
+    success: Color3;
+    error: Color3;
+}
+export declare const DefaultPalette: {
+    readonly mocha: {
+        readonly background: Color3;
+        readonly surface: Color3;
+        readonly text: Color3;
+        readonly subtext: Color3;
+        readonly highlight: Color3;
+        readonly success: Color3;
+        readonly error: Color3;
+    };
+    readonly macchiato: {
+        readonly background: Color3;
+        readonly surface: Color3;
+        readonly text: Color3;
+        readonly subtext: Color3;
+        readonly highlight: Color3;
+        readonly success: Color3;
+        readonly error: Color3;
+    };
+    readonly frappe: {
+        readonly background: Color3;
+        readonly surface: Color3;
+        readonly text: Color3;
+        readonly subtext: Color3;
+        readonly highlight: Color3;
+        readonly success: Color3;
+        readonly error: Color3;
+    };
+    readonly latte: {
+        readonly background: Color3;
+        readonly surface: Color3;
+        readonly text: Color3;
+        readonly subtext: Color3;
+        readonly highlight: Color3;
+        readonly success: Color3;
+        readonly error: Color3;
+    };
+    readonly builder: {
+        readonly background: Color3;
+        readonly surface: Color3;
+        readonly text: Color3;
+        readonly subtext: Color3;
+        readonly highlight: Color3;
+        readonly success: Color3;
+        readonly error: Color3;
+    };
+};

package/out/palette.lua

@@ -0,0 +1,51 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local DefaultPalette = {
+	mocha = {
+		background = Color3.fromRGB(24, 24, 37),
+		surface = Color3.fromRGB(30, 30, 46),
+		text = Color3.fromRGB(205, 214, 244),
+		subtext = Color3.fromRGB(166, 173, 200),
+		highlight = Color3.fromRGB(137, 180, 250),
+		success = Color3.fromRGB(166, 227, 161),
+		error = Color3.fromRGB(243, 139, 168),
+	},
+	macchiato = {
+		background = Color3.fromRGB(30, 32, 48),
+		surface = Color3.fromRGB(36, 39, 58),
+		text = Color3.fromRGB(202, 211, 245),
+		subtext = Color3.fromRGB(165, 173, 203),
+		highlight = Color3.fromRGB(138, 173, 244),
+		success = Color3.fromRGB(166, 218, 149),
+		error = Color3.fromRGB(237, 135, 150),
+	},
+	frappe = {
+		background = Color3.fromRGB(41, 44, 60),
+		surface = Color3.fromRGB(48, 52, 70),
+		text = Color3.fromRGB(198, 208, 245),
+		subtext = Color3.fromRGB(165, 173, 206),
+		highlight = Color3.fromRGB(140, 170, 238),
+		success = Color3.fromRGB(166, 209, 137),
+		error = Color3.fromRGB(231, 130, 132),
+	},
+	latte = {
+		background = Color3.fromRGB(230, 233, 239),
+		surface = Color3.fromRGB(239, 241, 245),
+		text = Color3.fromRGB(76, 79, 105),
+		subtext = Color3.fromRGB(92, 95, 119),
+		highlight = Color3.fromRGB(30, 102, 245),
+		success = Color3.fromRGB(64, 160, 43),
+		error = Color3.fromRGB(210, 15, 57),
+	},
+	builder = {
+		background = Color3.fromRGB(0, 0, 0),
+		surface = Color3.fromRGB(53, 53, 53),
+		text = Color3.fromRGB(255, 255, 255),
+		subtext = Color3.fromRGB(162, 162, 162),
+		highlight = Color3.fromRGB(239, 122, 54),
+		success = Color3.fromRGB(78, 204, 90),
+		error = Color3.fromRGB(255, 68, 68),
+	},
+}
+return {
+	DefaultPalette = DefaultPalette,
+}

package/out/providers/api-provider.d.ts

@@ -0,0 +1,8 @@
+import { ClientAPI } from "@rbxts/centurion";
+import React from "@rbxts/react";
+interface ApiProviderProps extends React.PropsWithChildren {
+    api: ClientAPI;
+}
+export declare const ApiContext: React.Context<ClientAPI>;
+export declare function ApiProvider({ api, children }: ApiProviderProps): JSX.Element;
+export {};

package/out/providers/api-provider.lua

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local createContext = _react.createContext
+local ApiContext = createContext({})
+local function ApiProvider(_param)
+	local api = _param.api
+	local children = _param.children
+	return React.createElement(ApiContext.Provider, {
+		value = api,
+	}, children)
+end
+return {
+	ApiProvider = ApiProvider,
+	ApiContext = ApiContext,
+}

package/out/providers/options-provider.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from "@rbxts/beacon";
+import React from "@rbxts/react";
+import { InterfaceOptions } from "../types";
+export interface InterfaceOptionsWithState extends InterfaceOptions {
+    isMouseOnGUI: boolean;
+    setMouseOnGUI: (newState: boolean) => void;
+}
+export declare const OptionsContext: React.Context<InterfaceOptionsWithState>;
+export interface OptionsProviderProps extends React.PropsWithChildren {
+    value: InterfaceOptions;
+    changed: Signal<[options: Partial<InterfaceOptions>]>;
+}
+export declare function OptionsProvider({ value, changed, children, }: OptionsProviderProps): JSX.Element;

package/out/providers/options-provider.lua

@@ -0,0 +1,39 @@
+-- Compiled with roblox-ts v2.3.0-dev-26ec859
+local TS = _G[script]
+local useEventListener = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useEventListener
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local createContext = _react.createContext
+local useState = _react.useState
+-- we can safely assign to {} as the value will always be assigned in the provider
+local OptionsContext = createContext({})
+local function OptionsProvider(_param)
+	local value = _param.value
+	local changed = _param.changed
+	local children = _param.children
+	local isMouseOnGUI, setMouseOnGUI = useState(false)
+	local _object = table.clone(value)
+	setmetatable(_object, nil)
+	local options, setOptions = useState(_object)
+	useEventListener(changed, function(options)
+		setOptions(function(prev)
+			local _object_1 = table.clone(prev)
+			setmetatable(_object_1, nil)
+			for _k, _v in options do
+				_object_1[_k] = _v
+			end
+			return _object_1
+		end)
+	end)
+	local _attributes = {}
+	local _object_1 = table.clone(options)
+	setmetatable(_object_1, nil)
+	_object_1.isMouseOnGUI = isMouseOnGUI
+	_object_1.setMouseOnGUI = setMouseOnGUI
+	_attributes.value = _object_1
+	return React.createElement(OptionsContext.Provider, _attributes, children)
+end
+return {
+	OptionsProvider = OptionsProvider,
+	OptionsContext = OptionsContext,
+}