@rbxts/uiblox 0.1.47 → 0.1.49

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

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

package/out/theme/context/ThemeProducer.luau

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

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

@@ -1,11 +1,7 @@
-import React, { PropsWithChildren } from "@rbxts/react";
 import { Theme } from "../interfaces/index";
-export declare const ThemeContext: React.Context<{
-    theme: Theme;
-    setTheme?: React.Dispatch<React.SetStateAction<Theme>>;
-}>;
+import { CustomizedProps } from "../types/index";
 export interface ThemeProviderProps {
-    initialTheme?: Theme;
+    theme?: Theme;
 }
-export declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): JSX.Element;
+declare function ThemeProvider(props: CustomizedProps<Instance, ThemeProviderProps>): JSX.Element;
 export default ThemeProvider;

package/out/theme/context/ThemeProvider.luau

@@ -2,33 +2,27 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local StrictMode = _react.StrictMode
 local useEffect = _react.useEffect
-local useMemo = _react.useMemo
-local useState = _react.useState
+local ReflexProvider = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).ReflexProvider
 local DEFAULT_THEME = TS.import(script, script.Parent.Parent, "constants").DEFAULT_THEME
-local ThemeContext = React.createContext({
-	theme = DEFAULT_THEME,
-})
+local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
 local function ThemeProvider(props)
 	local _binding = props
-	local initialTheme = _binding.initialTheme
-	local theme, setTheme = useState(initialTheme or DEFAULT_THEME)
+	local theme = _binding.theme
+	if theme == nil then
+		theme = DEFAULT_THEME
+	end
+	local children = _binding.children
+	-- When theme prop changes
 	useEffect(function()
-		setTheme(initialTheme or DEFAULT_THEME)
-	end, { initialTheme })
-	local memoizedValue = useMemo(function()
-		return {
-			theme = theme,
-			setTheme = setTheme,
-		}
+		themeProducer.setTheme(theme)
 	end, { theme })
-	return React.createElement(ThemeContext.Provider, {
-		value = memoizedValue,
-	}, props.children)
+	return React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
+		producer = themeProducer,
+	}, children))
 end
 local default = ThemeProvider
 return {
-	ThemeProvider = ThemeProvider,
-	ThemeContext = ThemeContext,
 	default = default,
 }

package/out/theme/hooks/useTheme.d.ts

@@ -1,4 +1,6 @@
-export default function useTheme(): {
-    theme: import("../index").Theme;
-    setTheme?: import("@rbxts/react").Dispatch<import("@rbxts/react").SetStateAction<import("..").Theme>>;
+import { Theme } from "../interfaces/index";
+declare const useTheme: () => {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
 };
+export default useTheme;

package/out/theme/hooks/useTheme.luau

@@ -1,10 +1,26 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local useContext = TS.import(script, TS.getModule(script, "@rbxts", "react")).useContext
-local ThemeContext = TS.import(script, script.Parent.Parent, "context").ThemeContext
-local function useTheme()
-	return useContext(ThemeContext)
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useCallback = _react.useCallback
+local useMemo = _react.useMemo
+local useState = _react.useState
+local themeProducer = TS.import(script, script.Parent.Parent, "context", "ThemeProducer").themeProducer
+local useTheme = function()
+	local theme, setTheme = useState(themeProducer:getState())
+	themeProducer:subscribe(function(state, _previousState)
+		setTheme(state)
+	end)
+	local setProducerTheme = useCallback(function(t)
+		themeProducer.setTheme(t)
+	end, { setTheme })
+	return useMemo(function()
+		return {
+			theme = theme,
+			setTheme = setProducerTheme,
+		}
+	end, { theme, setTheme })
 end
+local default = useTheme
 return {
-	default = useTheme,
+	default = default,
 }

package/out/theme/index.d.ts

@@ -3,7 +3,6 @@ export * from "./constants/index";
 export { DEFAULT_THEME } from "./constants/index";
 export * from "./context/index";
 export { ThemeProvider } from "./context/index";
-export { ThemeContext } from "./context/index";
 export { useTheme } from "./hooks/index";
 export * from "./interfaces/index";
 export * from "./styles/index";

package/out/theme/init.luau

@@ -9,7 +9,6 @@ for _k, _v in TS.import(script, script, "context") or {} do
 	exports[_k] = _v
 end
 exports.ThemeProvider = TS.import(script, script, "context").ThemeProvider
-exports.ThemeContext = TS.import(script, script, "context").ThemeContext
 exports.useTheme = TS.import(script, script, "hooks").useTheme
 for _k, _v in TS.import(script, script, "interfaces") or {} do
 	exports[_k] = _v

package/out/ui/packages/layout/components/Grid.d.ts

@@ -1,13 +1,13 @@
 import { CustomizedProps } from "../../../../theme/index";
 export interface GridProps {
-    cellPadding?: UDim;
+    cellPadding?: UDim2;
     cellSize?: UDim2;
     fillDirection?: Enum.FillDirection;
     fillDirectionMaxCells?: number;
     sortOrder?: Enum.SortOrder;
     startCorner: Enum.StartCorner;
     horizontalAlignment?: Enum.HorizontalAlignment;
-    veritcalAlignment?: Enum.VerticalAlignment;
+    verticalAlignment?: Enum.VerticalAlignment;
 }
 declare function Grid(props: CustomizedProps<Frame, GridProps>): JSX.Element;
 export default Grid;

package/out/ui/packages/layout/components/Grid.luau

@@ -20,7 +20,7 @@ local useGridStyles = makeStyles(function(_, props)
 			SortOrder = props.sortOrder,
 			StartCorner = props.startCorner,
 			HorizontalAlignment = props.horizontalAlignment,
-			VerticalAlignment = props.veritcalAlignment,
+			VerticalAlignment = props.verticalAlignment,
 		},
 	})
 end)
@@ -28,7 +28,7 @@ local function Grid(props)
 	local _binding = props
 	local cellPadding = _binding.cellPadding
 	if cellPadding == nil then
-		cellPadding = UDim.new(0, 0)
+		cellPadding = UDim2.fromScale(0, 0)
 	end
 	local cellSize = _binding.cellSize
 	if cellSize == nil then
@@ -54,9 +54,9 @@ local function Grid(props)
 	if horizontalAlignment == nil then
 		horizontalAlignment = Enum.HorizontalAlignment.Left
 	end
-	local veritcalAlignment = _binding.veritcalAlignment
-	if veritcalAlignment == nil then
-		veritcalAlignment = Enum.VerticalAlignment.Top
+	local verticalAlignment = _binding.verticalAlignment
+	if verticalAlignment == nil then
+		verticalAlignment = Enum.VerticalAlignment.Top
 	end
 	local className = _binding.className
 	local children = _binding.children
@@ -70,7 +70,7 @@ local function Grid(props)
 		sortOrder = sortOrder,
 		startCorner = startCorner,
 		horizontalAlignment = horizontalAlignment,
-		veritcalAlignment = veritcalAlignment,
+		verticalAlignment = verticalAlignment,
 	})
 	local baseGrid = _binding_1.baseGrid
 	local baseLayout = _binding_1.baseLayout

package/out/ui/packages/layout/components/List.d.ts

@@ -6,7 +6,7 @@ export interface ListProps {
     wrap?: "wrap" | "no-wrap";
     horizontalAlignment?: Enum.HorizontalAlignment;
     horizontalFlex?: Enum.UIFlexAlignment;
-    veritcalAlignment?: Enum.VerticalAlignment;
+    verticalAlignment?: Enum.VerticalAlignment;
     verticalFlex?: Enum.UIFlexAlignment;
 }
 declare function List(props: CustomizedProps<Frame, ListProps>): JSX.Element;

package/out/ui/packages/layout/components/List.luau

@@ -19,7 +19,7 @@ local useListStyles = makeStyles(function(_, props)
 			Wraps = props.wrap == "wrap",
 			HorizontalAlignment = props.horizontalAlignment,
 			HorizontalFlex = props.horizontalFlex,
-			VerticalAlignment = props.veritcalAlignment,
+			VerticalAlignment = props.verticalAlignment,
 			VerticalFlex = props.verticalFlex,
 		},
 	})
@@ -50,9 +50,9 @@ local function List(props)
 	if horizontalFlex == nil then
 		horizontalFlex = Enum.UIFlexAlignment.None
 	end
-	local veritcalAlignment = _binding.veritcalAlignment
-	if veritcalAlignment == nil then
-		veritcalAlignment = Enum.VerticalAlignment.Top
+	local verticalAlignment = _binding.verticalAlignment
+	if verticalAlignment == nil then
+		verticalAlignment = Enum.VerticalAlignment.Top
 	end
 	local verticalFlex = _binding.verticalFlex
 	if verticalFlex == nil then
@@ -69,7 +69,7 @@ local function List(props)
 		wrap = wrap,
 		horizontalAlignment = horizontalAlignment,
 		horizontalFlex = horizontalFlex,
-		veritcalAlignment = veritcalAlignment,
+		verticalAlignment = verticalAlignment,
 		verticalFlex = verticalFlex,
 	})
 	local baseList = _binding_1.baseList

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.47",
+	"version": "0.1.49",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {