@rbxts/uiblox 0.1.11 → 0.1.14

package/README.md

@@ -103,7 +103,7 @@ class AppLayout extends Component {
 	render() {
 		return (
 			<ThemeProvider theme={DarkTheme}>
-				<frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
+				<frame key={"AppLayout"} Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
 					<MyComponent />
 				</frame>
 			</ThemeProvider>
@@ -124,8 +124,7 @@ then you can omit props without a type warning (i.e. `makeStyles(theme => {})`
 instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
 
 ```javascript
-import Roact from "@rbxts/roact";
-import { useState, markPureComponent } from "@rbxts/roact-hooked";
+import React, { useState } from "@rbxts/react";
 import useMyComponentStyles from "./MyComponent.styles";
 import { Button } from "@rbxts/uiblox";
 
@@ -141,7 +140,7 @@ function MyComponent(props: MyComponentProps) {
   const { root, button } = useMyComponentStyles(props);
 
   return (
-    <frame {...root}>
+    <frame key="MyComponent" {...root}>
       <Button
         variant="outlined"
         text={title}

package/out/theme/components/ThemeProducer.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from "../interfaces/theme/index";
+import { InferState } from "@rbxts/reflex";
+export declare const themeProducer: import("@rbxts/reflex").Producer<Theme, {
+    setTheme: (_state: Theme, theme: Theme) => Theme;
+}>;
+export type ThemeProducer = typeof themeProducer;
+export type ThemeState = InferState<ThemeProducer>;

package/out/theme/components/ThemeProducer.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local createProducer = TS.import(script, TS.getModule(script, "@rbxts", "reflex").src).createProducer
+local themeProducer = createProducer(DefaultTheme, {
+	setTheme = function(_state, theme)
+		return theme
+	end,
+})
+return {
+	themeProducer = themeProducer,
+}

package/out/theme/components/ThemeProvider.d.ts

@@ -1,9 +1,7 @@
-import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme/index";
 import { CustomizedProps } from "../types/index";
 export interface ThemeProviderProps {
     theme?: Theme;
 }
-declare function ThemeProvider(props: CustomizedProps<Instance, ThemeProviderProps>): Roact.Element;
-declare const _default: typeof ThemeProvider;
-export default _default;
+declare function ThemeProvider(props: CustomizedProps<Instance, ThemeProviderProps>): JSX.Element;
+export default ThemeProvider;

package/out/theme/components/ThemeProvider.luau

@@ -1,21 +1,22 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
-local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src).StoreProvider
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local themeStore = TS.import(script, script.Parent, "ThemeStore").themeStore
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local StrictMode = _react.StrictMode
 local ThemeWrapper = TS.import(script, script.Parent, "ThemeWrapper").default
+local ReflexProvider = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).ReflexProvider
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeProvider(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding.children
-	return Roact.jsx(StoreProvider, {
-		store = themeStore,
-	}, Roact.jsx(ThemeWrapper, {
+	return React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
+		producer = themeProducer,
+	}, React.createElement(ThemeWrapper, {
 		theme = theme,
-	}, children))
+	}, children)))
 end
-local default = markPureComponent(ThemeProvider)
+local default = ThemeProvider
 return {
 	default = default,
 }

package/out/theme/components/ThemeWrapper.d.ts

@@ -1,9 +1,7 @@
-import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme/index";
 import { CustomizedProps } from "../types/index";
 export interface ThemeWrapperProps {
     theme?: Theme;
 }
-declare function ThemeWrapper(props: CustomizedProps<Instance, ThemeWrapperProps>): Roact.Element;
-declare const _default: typeof ThemeWrapper;
-export default _default;
+declare function ThemeWrapper(props: CustomizedProps<Instance, ThemeWrapperProps>): JSX.Element;
+export default ThemeWrapper;

package/out/theme/components/ThemeWrapper.luau

@@ -1,37 +1,32 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useRef = _roact_hooked.useRef
-local _roact_rodux_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src)
-local useDispatch = _roact_rodux_hooked.useDispatch
-local useSelector = _roact_rodux_hooked.useSelector
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local selectTheme = TS.import(script, script.Parent, "ThemeStore").selectTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local useProducer = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).useProducer
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeWrapper(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding.children
-	local dispatch = useDispatch()
+	local _binding_1 = useProducer()
+	local setTheme = _binding_1.setTheme
 	local ref = useRef()
-	local currentTheme = useSelector(selectTheme)
-	-- When theme changes
+	-- When theme prop changes
 	useEffect(function()
-		dispatch({
-			type = "set",
-			newTheme = theme or DefaultTheme,
-		})
+		setTheme(theme or DefaultTheme)
 	end, { theme })
-	return Roact.jsx("frame", {
+	return React.createElement("frame", {
+		key = `ThemeWrapper-{themeProducer:getState().type}`,
 		BackgroundTransparency = 1,
 		Size = UDim2.new(1, 0, 1, 0),
 		ZIndex = 500000,
-		Ref = ref,
-	}, currentTheme and children)
+		ref = ref,
+	}, children)
 end
-local default = markPureComponent(ThemeWrapper)
+local default = ThemeWrapper
 return {
 	default = default,
 }

package/out/theme/components/index.d.ts

@@ -1,8 +1,5 @@
 export { default as ThemeProvider } from "./ThemeProvider";
 export { ThemeProviderProps } from "./ThemeProvider";
 export * from "./ThemeProvider";
-export { ThemeState } from "./ThemeStore";
-export { ThemeAction } from "./ThemeStore";
-export { themeReducer } from "./ThemeStore";
-export { themeStore } from "./ThemeStore";
-export { TThemeStore } from "./ThemeStore";
+export { ThemeState } from "./ThemeProducer";
+export { ThemeProducer } from "./ThemeProducer";

package/out/theme/components/init.luau

@@ -5,6 +5,4 @@ exports.ThemeProvider = TS.import(script, script, "ThemeProvider").default
 for _k, _v in TS.import(script, script, "ThemeProvider") or {} do
 	exports[_k] = _v
 end
-exports.themeReducer = TS.import(script, script, "ThemeStore").themeReducer
-exports.themeStore = TS.import(script, script, "ThemeStore").themeStore
 return exports

package/out/theme/index.d.ts

@@ -1,6 +1,5 @@
 export { default as Theme } from "./interfaces/theme/Theme";
 export { ThemeProvider } from "./components/index";
-export { themeStore } from "./components/index";
 export { ThemeState } from "./components/index";
 export * from "./components/index";
 export * from "./constants/index";

package/out/theme/init.luau

@@ -2,7 +2,6 @@
 local TS = _G[script]
 local exports = {}
 exports.ThemeProvider = TS.import(script, script, "components").ThemeProvider
-exports.themeStore = TS.import(script, script, "components").themeStore
 for _k, _v in TS.import(script, script, "components") or {} do
 	exports[_k] = _v
 end

package/out/theme/styles/utilities/makeStyles.luau

@@ -1,11 +1,11 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent, "themes").default
-local themeStore = TS.import(script, script.Parent.Parent.Parent, "components", "ThemeStore").themeStore
+local themeProducer = TS.import(script, script.Parent.Parent.Parent, "components", "ThemeProducer").themeProducer
 local makeStyles = function(f)
 	return function(props)
 		local _exitType, _returns = TS.try(function()
-			local theme = themeStore:getState().theme
+			local theme = themeProducer:getState()
 			local _fn = f
 			local _exp = theme or DefaultTheme
 			local _condition = props

package/out/theme/types/types.d.ts

@@ -1,13 +1,12 @@
-import Roact, { Element, PropsWithChildren } from "@rbxts/roact";
+import React, { PropsWithChildren } from "@rbxts/react";
 import { WriteableStyle } from "../interfaces/index";
 export interface CommonProps<T extends Instance> extends PropsWithChildren {
     className?: WriteableStyle<T>;
     component?: T;
-    children?: Roact.Children;
 }
 export type BaseDefaultProps<T extends Instance, P> = CommonProps<T> & P;
 export type BaseCustomizedProps<T extends Instance, P> = BaseDefaultProps<T, P>;
 export type DefaultProps<T extends Instance, P = {}> = BaseDefaultProps<T, P>;
 export type CustomizedProps<T extends Instance, P = {}> = BaseCustomizedProps<T, P>;
-export type CustomizedRef<T extends Instance> = T extends Instance ? any : T extends keyof Roact.JsxInstance<T> ? WritableInstanceProperties<T> : never;
-export type CustomizedForwardRefComponent<D extends Instance, P = {}> = <T extends Instance = D>(props: CustomizedProps<T, P> & WritableInstanceProperties<CustomizedRef<T>>) => Element | undefined;
+export type CustomizedRef<T extends Instance> = T extends Instance ? any : T extends keyof React.ReactElement<T> ? WritableInstanceProperties<T> : never;
+export type CustomizedForwardRefComponent<D extends Instance, P = {}> = <T extends Instance = D>(props: CustomizedProps<T, P> & WritableInstanceProperties<CustomizedRef<T>>) => React.Element | undefined;

package/out/ui/packages/button/components/Button.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types/index";
 export type DefaultButtonComponent = TextButton;
@@ -21,6 +20,5 @@ export interface ButtonProps {
     mouseEnter?: () => void;
     mouseLeave?: () => void;
 }
-declare function Button(props: CustomizedProps<DefaultButtonComponent, ButtonProps>): Roact.Element;
-declare const _default: typeof Button;
-export default _default;
+declare function Button(props: CustomizedProps<DefaultButtonComponent, ButtonProps>): JSX.Element;
+export default Button;

package/out/ui/packages/button/components/Button.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
 local function Button(props)
 	local _binding = props
@@ -47,8 +46,12 @@ local function Button(props)
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
 	local hovering, setHovering = useState(false)
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Button",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	for _k, _v in font do
 		_attributes[_k] = _v
 	end
@@ -134,17 +137,17 @@ local function Button(props)
 	if _condition then
 		local _attributes_1 = table.clone(stroke)
 		setmetatable(_attributes_1, nil)
-		_condition = Roact.jsx("uistroke", _attributes_1)
+		_condition = React.createElement("uistroke", _attributes_1)
 	end
 	local _condition_1 = rounded
 	if _condition_1 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
-		_condition_1 = Roact.jsx("uicorner", _attributes_1)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	return Roact.jsx("textbutton", _attributes, _condition, _condition_1, children)
+	return React.createElement("textbutton", _attributes, _condition, _condition_1, children)
 end
-local default = markPureComponent(Button)
+local default = Button
 return {
 	default = default,
 }

package/out/ui/packages/divider/components/Divider.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 import { Orientations } from "../../../enums/index";
 type DefaultDividerComponent = Frame;
@@ -10,5 +9,5 @@ export interface DividerProps {
     transparency?: number;
     weight?: number;
 }
-declare function Divider<T extends DefaultDividerComponent>(props: CustomizedProps<T, DividerProps>): Roact.Element;
+declare function Divider<T extends DefaultDividerComponent>(props: CustomizedProps<T, DividerProps>): JSX.Element;
 export default Divider;

package/out/ui/packages/divider/components/Divider.luau

@@ -1,21 +1,25 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
 	local className = _binding.className
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Divider",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	_attributes.BorderSizePixel = 0
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	return Roact.jsx("frame", _attributes)
+	return React.createElement("frame", _attributes)
 end
 local default = Divider
 return {

package/out/ui/packages/icon/components/Icon.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums/index";
 import { CustomizedProps } from "../../../../theme/index";
 export interface IconProps {
@@ -7,6 +6,5 @@ export interface IconProps {
     tint?: Color3;
 }
 type DefaultIconComponent = ImageLabel;
-declare function Icon(props: CustomizedProps<DefaultIconComponent, IconProps>): Roact.Element;
-declare const _default: typeof Icon;
-export default _default;
+declare function Icon(props: CustomizedProps<DefaultIconComponent, IconProps>): JSX.Element;
+export default Icon;

package/out/ui/packages/icon/components/Icon.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
@@ -10,8 +9,12 @@ local function Icon(props)
 	local className = _binding.className
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Icon",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -19,9 +22,9 @@ local function Icon(props)
 	end
 	_attributes.Image = tostring(icon)
 	_attributes.ImageColor3 = tint or container.ImageColor3
-	return Roact.jsx("imagelabel", _attributes)
+	return React.createElement("imagelabel", _attributes)
 end
-local default = markPureComponent(Icon)
+local default = Icon
 return {
 	default = default,
 }

package/out/ui/packages/iconButton/components/IconButton.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums/index";
 import { CustomizedProps } from "../../../../theme/index";
 export interface IconButtonProps {
@@ -9,6 +8,5 @@ export interface IconButtonProps {
     onClick?: () => void;
 }
 type DefaultIconButtonComponent = ImageButton;
-declare function IconButton(props: CustomizedProps<DefaultIconButtonComponent, IconButtonProps>): Roact.Element;
-declare const _default: typeof IconButton;
-export default _default;
+declare function IconButton(props: CustomizedProps<DefaultIconButtonComponent, IconButtonProps>): JSX.Element;
+export default IconButton;

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
 local function IconButton(props)
 	local _binding = props
@@ -15,8 +14,12 @@ local function IconButton(props)
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
 	local hovering, setHovering = useState(false)
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "IconButton",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -38,9 +41,9 @@ local function IconButton(props)
 			setHovering(false)
 		end,
 	}
-	return Roact.jsx("imagebutton", _attributes)
+	return React.createElement("imagebutton", _attributes)
 end
-local default = markPureComponent(IconButton)
+local default = IconButton
 return {
 	default = default,
 }

package/out/ui/packages/input/components/Input.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 import { InputColor, InputMargin, InputVariant } from "../types/index";
 export type DefaultInputComponent = Frame;
@@ -19,6 +18,5 @@ export interface InputProps {
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;
 }
-declare function Input(props: CustomizedProps<DefaultInputComponent, InputProps>): Roact.Element;
-declare const _default: typeof Input;
-export default _default;
+declare function Input(props: CustomizedProps<DefaultInputComponent, InputProps>): JSX.Element;
+export default Input;

package/out/ui/packages/input/components/Input.luau

@@ -1,9 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local useState = _roact_hooked.useState
-local markPureComponent = _roact_hooked.markPureComponent
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
@@ -50,17 +49,29 @@ local function Input(props)
 		_condition = ""
 	end
 	local input, setInput = useState(_condition)
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Input",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(margin)
-	setmetatable(_attributes_1, nil)
-	local _attributes_2 = table.clone(font)
-	setmetatable(_attributes_2, nil)
+	local _attributes_1 = {
+		key = "Margin",
+	}
+	for _k, _v in margin do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = {
+		key = "Field",
+	}
+	for _k, _v in font do
+		_attributes_2[_k] = _v
+	end
 	for _k, _v in box do
 		_attributes_2[_k] = _v
 	end
@@ -94,16 +105,16 @@ local function Input(props)
 	if _condition_1 then
 		local _attributes_3 = table.clone(stroke)
 		setmetatable(_attributes_3, nil)
-		_condition_1 = Roact.jsx("uistroke", _attributes_3)
+		_condition_1 = React.createElement("uistroke", _attributes_3)
 	end
 	local _condition_2 = rounded
 	if _condition_2 then
 		local _attributes_3 = table.clone(corner)
 		setmetatable(_attributes_3, nil)
-		_condition_2 = Roact.jsx("uicorner", _attributes_3)
+		_condition_2 = React.createElement("uicorner", _attributes_3)
 	end
-	local _exp = Roact.jsx("textbox", _attributes_2, _condition_1, _condition_2)
-	local _exp_1 = Roact.jsx(Divider, {
+	local _exp = React.createElement("textbox", _attributes_2, _condition_1, _condition_2)
+	local _exp_1 = React.createElement(Divider, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
 		className = classNames({
@@ -113,8 +124,12 @@ local function Input(props)
 	})
 	local _condition_3 = helperText ~= nil
 	if _condition_3 then
-		local _attributes_3 = table.clone(font)
-		setmetatable(_attributes_3, nil)
+		local _attributes_3 = {
+			key = "HelperText",
+		}
+		for _k, _v in font do
+			_attributes_3[_k] = _v
+		end
 		for _k, _v in helper do
 			_attributes_3[_k] = _v
 		end
@@ -124,11 +139,11 @@ local function Input(props)
 			_attributes_3[_k] = _v
 		end
 		_attributes_3.Text = helperText
-		_condition_3 = (Roact.jsx("textlabel", _attributes_3))
+		_condition_3 = (React.createElement("textlabel", _attributes_3))
 	end
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, _exp, _exp_1, _condition_3))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_3))
 end
-local default = markPureComponent(Input)
+local default = Input
 return {
 	default = default,
 }

package/out/ui/packages/progressBar/components/ProgressBar.d.ts

@@ -1,9 +1,7 @@
-import Roact from "@rbxts/roact";
 import { WriteableStyle } from "../../../../theme/index";
 export interface ProgressBarProps {
     progress: number;
     className?: WriteableStyle<Frame>;
 }
-declare function ProgressBar({ progress, className }: ProgressBarProps): Roact.Element;
-declare const _default: typeof ProgressBar;
-export default _default;
+declare function ProgressBar({ progress, className }: ProgressBarProps): JSX.Element;
+export default ProgressBar;

package/out/ui/packages/progressBar/components/ProgressBar.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
 local function ProgressBar(_param)
 	local progress = _param.progress
@@ -13,34 +12,54 @@ local function ProgressBar(_param)
 	local inner = _binding.inner
 	local fill = _binding.fill
 	local corner = _binding.corner
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "ProgressBar",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(outer)
-	setmetatable(_attributes_1, nil)
-	local _attributes_2 = table.clone(corner)
-	setmetatable(_attributes_2, nil)
-	local _exp = Roact.jsx("uicorner", _attributes_2)
+	local _attributes_1 = {
+		key = "Bar",
+	}
+	for _k, _v in outer do
+		_attributes_1[_k] = _v
+	end
+	local _attributes_2 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_2[_k] = _v
+	end
+	local _exp = React.createElement("uicorner", _attributes_2)
 	local _attributes_3 = table.clone(stroke)
 	setmetatable(_attributes_3, nil)
-	local _exp_1 = Roact.jsx("uistroke", _attributes_3)
+	local _exp_1 = React.createElement("uistroke", _attributes_3)
 	local _attributes_4 = table.clone(inner)
 	setmetatable(_attributes_4, nil)
-	local _attributes_5 = table.clone(corner)
-	setmetatable(_attributes_5, nil)
-	local _exp_2 = Roact.jsx("uicorner", _attributes_5)
+	local _attributes_5 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_5[_k] = _v
+	end
+	local _exp_2 = React.createElement("uicorner", _attributes_5)
 	local _attributes_6 = table.clone(fill)
 	setmetatable(_attributes_6, nil)
 	_attributes_6.Size = UDim2.new(progress / 100, 0, 1, 0)
-	local _attributes_7 = table.clone(corner)
-	setmetatable(_attributes_7, nil)
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, _exp, _exp_1, Roact.jsx("frame", _attributes_4, _exp_2, Roact.jsx("frame", _attributes_6, Roact.jsx("uicorner", _attributes_7)))))
+	local _attributes_7 = {
+		key = "Corner",
+	}
+	for _k, _v in corner do
+		_attributes_7[_k] = _v
+	end
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, React.createElement("frame", _attributes_4, _exp_2, React.createElement("frame", _attributes_6, React.createElement("uicorner", _attributes_7)))))
 end
-local default = markPureComponent(ProgressBar)
+local default = ProgressBar
 return {
 	default = default,
 }

package/out/ui/packages/shadow/components/Shadow.d.ts

@@ -1,4 +1,2 @@
-import Roact from "@rbxts/roact";
-declare function Shadow(): Roact.Element;
-declare const _default: typeof Shadow;
-export default _default;
+declare function Shadow(): JSX.Element;
+export default Shadow;

package/out/ui/packages/shadow/components/Shadow.luau

@@ -1,10 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
 local function Shadow()
 	local _binding = useShadowStyles()
@@ -42,8 +41,12 @@ local function Shadow()
 		setZIndex(_condition_1 - 1)
 		parent.ClipsDescendants = false
 	end, { parent })
-	local _attributes = table.clone(container)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Shadow",
+	}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
 	_attributes.ZIndex = zIndex
 	_attributes.Event = {
 		AncestryChanged = function(rbx, parent)
@@ -52,11 +55,12 @@ local function Shadow()
 			end
 		end,
 	}
-	return Roact.jsx("frame", _attributes, cornerRadius ~= nil and Roact.jsx("uicorner", {
+	return React.createElement("frame", _attributes, cornerRadius ~= nil and React.createElement("uicorner", {
+		key = "Corner",
 		CornerRadius = cornerRadius,
 	}))
 end
-local default = markPureComponent(Shadow)
+local default = Shadow
 return {
 	default = default,
 }

package/out/ui/packages/sidebar/components/Sidebar.d.ts

@@ -1,9 +1,8 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 export type DefaultSidebarComponent = Frame;
 export interface SidebarProps {
     size: "compact" | "large";
     ignoreInset?: boolean;
 }
-declare function Sidebar<T extends DefaultSidebarComponent>(props: CustomizedProps<T, SidebarProps>): Roact.Element;
+declare function Sidebar<T extends DefaultSidebarComponent>(props: CustomizedProps<T, SidebarProps>): JSX.Element;
 export default Sidebar;

package/out/ui/packages/sidebar/components/Sidebar.luau

@@ -1,6 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useSidebarStyles = TS.import(script, script.Parent, "Sidebar.styles").default
 local function Sidebar(props)
 	local _binding = props
@@ -9,16 +9,24 @@ local function Sidebar(props)
 	local _binding_1 = useSidebarStyles(props)
 	local root = _binding_1.root
 	local container = _binding_1.container
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Sidebar",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(container)
-	setmetatable(_attributes_1, nil)
-	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, children))
+	local _attributes_1 = {
+		key = "Container",
+	}
+	for _k, _v in container do
+		_attributes_1[_k] = _v
+	end
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, children))
 end
 local default = Sidebar
 return {

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

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import ToastVariants from "../enums/ToastVariants";
 export interface ToastProps {
     text: string;
@@ -7,6 +6,5 @@ export interface ToastProps {
     variant?: ToastVariants;
     toggledAt?: number;
 }
-declare function Toast(props: ToastProps): Roact.Element;
-declare const _default: typeof Toast;
-export default _default;
+declare function Toast(props: ToastProps): JSX.Element;
+export default Toast;

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

@@ -1,11 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local BoatTween = TS.import(script, TS.getModule(script, "@rbxts", "boat-tween").src).BoatTween
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useEffect = _roact_hooked.useEffect
-local useRef = _roact_hooked.useRef
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DefaultTheme
 local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Directions
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
@@ -27,7 +26,7 @@ local function Toast(props)
 	local inActivePosition = _binding_1.inActivePosition
 	local frameRef = useRef()
 	local tween = function(direction)
-		local frame = frameRef:getValue()
+		local frame = frameRef.current
 		if not frame then
 			return nil
 		end
@@ -55,21 +54,31 @@ local function Toast(props)
 		end
 	end, {})
 	local _attributes = {
-		Ref = frameRef,
+		key = "Toast",
+		ref = frameRef,
 	}
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end
-	local _exp = Roact.jsx("uicorner", {
+	local _exp = React.createElement("uicorner", {
+		key = "Corner",
 		CornerRadius = UDim.new(0, DefaultTheme.shape.borderRadius),
 	})
-	local _exp_1 = Roact.jsx(Shadow)
-	local _attributes_1 = table.clone(label)
-	setmetatable(_attributes_1, nil)
+	local _exp_1 = React.createElement(Shadow)
+	local _attributes_1 = {
+		key = "Label",
+	}
+	for _k, _v in label do
+		_attributes_1[_k] = _v
+	end
 	_attributes_1.Text = text
-	local _exp_2 = Roact.jsx("textlabel", _attributes_1)
-	local _attributes_2 = table.clone(close)
-	setmetatable(_attributes_2, nil)
+	local _exp_2 = React.createElement("textlabel", _attributes_1)
+	local _attributes_2 = {
+		key = "Close",
+	}
+	for _k, _v in close do
+		_attributes_2[_k] = _v
+	end
 	_attributes_2.Event = {
 		MouseButton1Click = function()
 			tween(Directions.Out)
@@ -78,9 +87,9 @@ local function Toast(props)
 			end
 		end,
 	}
-	return Roact.jsx("frame", _attributes, _exp, _exp_1, _exp_2, Roact.jsx("imagebutton", _attributes_2))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
 end
-local default = markPureComponent(Toast)
+local default = Toast
 return {
 	default = default,
 }

package/out/ui/packages/treeView/components/TreeView.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 import { Icons } from "../../../enums/index";
 import Tree from "../interfaces/Tree";
@@ -8,6 +7,5 @@ export interface TreeViewProps {
     icon?: Icons;
     filter?: string;
 }
-declare function TreeView(props: CustomizedProps<DefaultTreeViewComponent, TreeViewProps>): Roact.Element;
-declare const _default: typeof TreeView;
-export default _default;
+declare function TreeView(props: CustomizedProps<DefaultTreeViewComponent, TreeViewProps>): JSX.Element;
+export default TreeView;

package/out/ui/packages/treeView/components/TreeView.luau

@@ -1,11 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
-local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local markPureComponent = _roact_hooked.markPureComponent
-local useCallback = _roact_hooked.useCallback
-local useEffect = _roact_hooked.useEffect
-local useState = _roact_hooked.useState
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useCallback = _react.useCallback
+local useEffect = _react.useEffect
+local useState = _react.useState
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DefaultTheme
 local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Typography = TS.import(script, script.Parent.Parent.Parent, "typography").Typography
@@ -134,8 +133,12 @@ local function TreeView(props)
 		-- Set expanded to new array
 		setExpanded(newExpanded)
 	end, { tree, filter })
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "TreeView",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -152,9 +155,13 @@ local function TreeView(props)
 	_attributes_1.color = "textSecondary"
 	_attributes_1.variant = "body"
 	_attributes_1.family = "bold"
-	local _exp = Roact.jsx(Typography, _attributes_1)
-	local _attributes_2 = table.clone(list)
-	setmetatable(_attributes_2, nil)
+	local _exp = React.createElement(Typography, _attributes_1)
+	local _attributes_2 = {
+		key = "List",
+	}
+	for _k, _v in list do
+		_attributes_2[_k] = _v
+	end
 	_attributes_2.CanvasSize = canvasSize
 	_attributes_2.Event = {
 		AncestryChanged = resizeScrollingFrame,
@@ -163,7 +170,7 @@ local function TreeView(props)
 	}
 	local _attributes_3 = table.clone(gridLayout)
 	setmetatable(_attributes_3, nil)
-	local _exp_1 = Roact.jsx("uigridlayout", _attributes_3)
+	local _exp_1 = React.createElement("uigridlayout", _attributes_3)
 	local _exp_2 = tree.branches
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#_exp_2)
@@ -179,8 +186,12 @@ local function TreeView(props)
 			end
 		end
 		if matchesBranchFilter or hasMatchingLeaf then
-			local _attributes_4 = table.clone(row)
-			setmetatable(_attributes_4, nil)
+			local _attributes_4 = {
+				key = `{branch.title}-{branchIndex}`,
+			}
+			for _k, _v in row do
+				_attributes_4[_k] = _v
+			end
 			_attributes_4.Event = {
 				MouseButton1Click = function()
 					if branch.onClick then
@@ -231,7 +242,7 @@ local function TreeView(props)
 				_attributes_5.size = "xxs"
 				_attributes_5.className = branchIcon
 				_attributes_5.tint = DefaultTheme.options.constants.extendedPalette.Gray[70]
-				_condition = (Roact.jsx(Icon, _attributes_5))
+				_condition = (React.createElement(Icon, _attributes_5))
 			end
 			local _attributes_5 = {
 				text = branch.title,
@@ -242,7 +253,7 @@ local function TreeView(props)
 			_attributes_5.color = "textPrimary"
 			_attributes_5.variant = "body"
 			_attributes_5.family = if selectedBranch == branch then "bold" else "default"
-			local _exp_3 = Roact.jsx("textbutton", _attributes_4, _condition, Roact.jsx(Typography, _attributes_5))
+			local _exp_3 = React.createElement("textbutton", _attributes_4, _condition, React.createElement(Typography, _attributes_5))
 			local _branch = branch
 			local _condition_1 = table.find(expanded, _branch) ~= nil
 			if _condition_1 then
@@ -252,8 +263,12 @@ local function TreeView(props)
 				local _callback_1 = function(leaf, leafIndex)
 					local matchesLeafFilter = matchesFilter(leaf.title)
 					if matchesBranchFilter or matchesLeafFilter then
-						local _attributes_6 = table.clone(row)
-						setmetatable(_attributes_6, nil)
+						local _attributes_6 = {
+							key = `{branch.title}-{branchIndex}-{leaf.title}-{leafIndex}`,
+						}
+						for _k, _v in row do
+							_attributes_6[_k] = _v
+						end
 						_attributes_6.Event = {
 							MouseButton1Click = function()
 								setSelectedLeaf(leaf)
@@ -263,7 +278,7 @@ local function TreeView(props)
 								end
 							end,
 						}
-						local _exp_5 = Roact.jsx(Icon, {
+						local _exp_5 = React.createElement(Icon, {
 							icon = icon or Icons.ListPrimary,
 							size = "xs",
 							className = leafIcon,
@@ -278,9 +293,9 @@ local function TreeView(props)
 						_attributes_7.color = "textPrimary"
 						_attributes_7.variant = "body"
 						_attributes_7.family = if selectedLeaf == leaf then "bold" else "default"
-						return Roact.jsx("textbutton", _attributes_6, _exp_5, Roact.jsx(Typography, _attributes_7))
+						return React.createElement("textbutton", _attributes_6, _exp_5, React.createElement(Typography, _attributes_7))
 					else
-						return Roact.jsx(Roact.Fragment)
+						return React.createElement(React.Fragment)
 					end
 				end
 				for _k, _v in _exp_4 do
@@ -289,18 +304,18 @@ local function TreeView(props)
 				-- ▲ ReadonlyArray.map ▲
 				_condition_1 = _newValue_1
 			end
-			return Roact.jsx(Roact.Fragment, nil, _exp_3, _condition_1)
+			return React.createElement(React.Fragment, nil, _exp_3, _condition_1)
 		else
-			return Roact.jsx(Roact.Fragment)
+			return React.createElement(React.Fragment)
 		end
 	end
 	for _k, _v in _exp_2 do
 		_newValue[_k] = _callback(_v, _k - 1, _exp_2)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return Roact.jsx("frame", _attributes, _exp, Roact.jsx("scrollingframe", _attributes_2, _exp_1, _newValue))
+	return React.createElement("frame", _attributes, _exp, React.createElement("scrollingframe", _attributes_2, _exp_1, _newValue))
 end
-local default = markPureComponent(TreeView)
+local default = TreeView
 return {
 	default = default,
 }

package/out/ui/packages/typography/components/Typography.d.ts

@@ -1,4 +1,3 @@
-import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme/index";
 import { FontFamilyVariant, FontSizeVariant } from "../../../../theme/interfaces/typography/index";
 import { TypographyAlignment } from "../types/TypographyAlignment";
@@ -15,5 +14,5 @@ export interface TypographyProps {
     noWrap?: boolean;
     lineClamp?: boolean;
 }
-declare function Typography<T extends DefaultTypographyComponent>(props: CustomizedProps<T, TypographyProps>): Roact.Element;
+declare function Typography<T extends DefaultTypographyComponent>(props: CustomizedProps<T, TypographyProps>): JSX.Element;
 export default Typography;

package/out/ui/packages/typography/components/Typography.luau

@@ -1,6 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src.ts)
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useTypographyStyles = TS.import(script, script.Parent, "Typography.styles").default
 local function Typography(props)
 	local _binding = props
@@ -13,8 +13,12 @@ local function Typography(props)
 	local _binding_1 = useTypographyStyles(props)
 	local root = _binding_1.root
 	local variantToken = _binding_1.variantToken
-	local _attributes = table.clone(root)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "Typography",
+	}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
 	_attributes.Text = text
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
@@ -24,7 +28,7 @@ local function Typography(props)
 	for _k, _v in variantToken do
 		_attributes[_k] = _v
 	end
-	return Roact.jsx("textlabel", _attributes, children)
+	return React.createElement("textlabel", _attributes, children)
 end
 local default = Typography
 return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.11",
+	"version": "0.1.14",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {
@@ -29,27 +29,30 @@
 		"access": "public"
 	},
 	"devDependencies": {
+		"@rbxts/attributes": "^1.0.0",
+		"@rbxts/compiler-types": "^3.0.0-types.0",
+		"@rbxts/types": "^1.0.813",
 		"@typescript-eslint/eslint-plugin": "^8.14.0",
 		"@typescript-eslint/parser": "^8.14.0",
 		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"eslint-plugin-roblox-ts": "^0.0.36",
-		"prettier": "^3.3.3"
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-unused-imports": "^4.1.4",
+		"prettier": "^3.3.3",
+		"roblox-ts": "^3.0.0",
+		"typescript": "^5.6.3"
 	},
 	"dependencies": {
-		"@rbxts/attributes": "^1.0.0",
 		"@rbxts/boat-tween": "^1.0.1",
-		"@rbxts/compiler-types": "^3.0.0-types.0",
-		"@rbxts/roact": "^3.0.1",
-		"@rbxts/roact-hooked": "^2.6.2",
-		"@rbxts/roact-rodux-hooked": "^1.1.3",
-		"@rbxts/rodux": "^3.0.0-ts.3",
+		"@rbxts/pretty-react-hooks": "^0.6.0",
+		"@rbxts/react": "^17.2.1",
+		"@rbxts/react-reflex": "^0.3.4",
+		"@rbxts/react-roblox": "^17.2.1",
+		"@rbxts/reflex": "^4.3.1",
 		"@rbxts/roselect": "^0.1.2",
-		"@rbxts/services": "^1.5.5",
-		"@rbxts/types": "^1.0.813",
-		"roblox-ts": "^3.0.0",
-		"typescript": "^5.6.3"
+		"@rbxts/services": "^1.5.5"
 	},
 	"directories": {
 		"doc": "docs"

package/out/theme/components/ThemeStore.d.ts

@@ -1,13 +0,0 @@
-import { Theme } from "../interfaces/theme/index";
-import { Store } from "@rbxts/rodux";
-export type ThemeState = {
-    theme: Theme;
-};
-export type ThemeAction = {
-    type: "set";
-    newTheme?: Theme;
-};
-export declare const themeReducer: import("@rbxts/rodux").Reducer<ThemeState, ThemeAction>;
-export declare const themeStore: Store<ThemeState, ThemeAction>;
-export type TThemeStore = typeof themeStore;
-export declare const selectTheme: import("@rbxts/roselect").OutputSelector<ThemeState, Theme, (res: Theme) => Theme>;

package/out/theme/components/ThemeStore.luau

@@ -1,29 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local _rodux = TS.import(script, TS.getModule(script, "@rbxts", "rodux").src)
-local createReducer = _rodux.createReducer
-local Store = _rodux.Store
-local createSelector = TS.import(script, TS.getModule(script, "@rbxts", "roselect").src).createSelector
-local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
-local themeReducer = createReducer({
-	theme = DefaultTheme,
-}, {
-	set = function(_param, _param_1)
-		local theme = _param.theme
-		local newTheme = _param_1.newTheme
-		return {
-			theme = newTheme or theme,
-		}
-	end,
-})
-local themeStore = Store.new(themeReducer)
-local selectTheme = createSelector(function(state)
-	return state.theme
-end, function(theme)
-	return theme
-end)
-return {
-	themeReducer = themeReducer,
-	themeStore = themeStore,
-	selectTheme = selectTheme,
-}