@rbxts/uiblox 0.1.38 → 0.1.40

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

@@ -0,0 +1 @@
+export { default as useThemeCallbacks } from "./useThemeCallbacks";

package/out/theme/callbacks/init.luau

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

package/out/theme/callbacks/useThemeCallbacks.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from "../interfaces/index";
+declare function useThemeCallbacks(): {
+    onSetTheme: (theme: Theme) => void;
+} | {
+    onSetTheme?: undefined;
+};
+export default useThemeCallbacks;

package/out/theme/callbacks/useThemeCallbacks.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
+local ThemeActionTypes = TS.import(script, script.Parent.Parent, "enums").ThemeActionTypes
+local useTheme = TS.import(script, script.Parent.Parent, "hooks").useTheme
+local function useThemeCallbacks()
+	local _binding = useTheme()
+	local dispatch = _binding.dispatch
+	return useMemo(function()
+		return if dispatch then {
+			onSetTheme = function(theme)
+				return dispatch({
+					type = ThemeActionTypes.SetTheme,
+					theme = theme,
+				})
+			end,
+		} else {}
+	end, { dispatch })
+end
+local default = useThemeCallbacks
+return {
+	default = default,
+}

package/out/theme/constants/ThemeConstants.d.ts

@@ -1,5 +1,7 @@
 import { Colors } from "../interfaces/palette/colors/index";
 import { Borders } from "../interfaces/spacing/index";
+import { ThemeState } from "../types/index";
 export declare const DARK_THEME_COLORS: Colors;
 export declare const LIGHT_THEME_COLORS: Colors;
 export declare const DEFAULT_BORDERS: Borders;
+export declare const INITIAL_THEME_STATE: ThemeState;

package/out/theme/constants/ThemeConstants.luau

@@ -8,6 +8,7 @@ local Green = _colors.Green
 local Purple = _colors.Purple
 local Red = _colors.Red
 local Yellow = _colors.Yellow
+local DefaultTheme = TS.import(script, script.Parent.Parent).DefaultTheme
 -- dark theme
 local DARK_THEME_COLORS = {
 	backgroundDefault = Common.Black,
@@ -97,8 +98,12 @@ local DEFAULT_BORDERS = {
 	default = 1,
 	divider = 2,
 }
+local INITIAL_THEME_STATE = {
+	theme = DefaultTheme,
+}
 return {
 	DARK_THEME_COLORS = DARK_THEME_COLORS,
 	LIGHT_THEME_COLORS = LIGHT_THEME_COLORS,
 	DEFAULT_BORDERS = DEFAULT_BORDERS,
+	INITIAL_THEME_STATE = INITIAL_THEME_STATE,
 }

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

@@ -0,0 +1,3 @@
+export { default as ThemeContext } from "./provider";
+export * from "./provider";
+export { default as themeReducer } from "./reducer";

package/out/theme/context/init.luau

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ThemeContext = TS.import(script, script, "provider").default
+for _k, _v in TS.import(script, script, "provider") or {} do
+	exports[_k] = _v
+end
+exports.themeReducer = TS.import(script, script, "reducer").default
+return exports

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

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from "@rbxts/react";
+import { ThemeDispatch, ThemeState } from "../types/index";
+import { Theme } from "../index";
+export declare const ThemeContext: React.Context<{
+    state: ThemeState;
+    dispatch: ThemeDispatch | undefined;
+}>;
+export interface ThemeProviderProps {
+    theme?: Theme;
+}
+export declare function ThemeProvider(props: PropsWithChildren<ThemeProviderProps>): JSX.Element;
+export default ThemeContext;

package/out/theme/context/provider.luau

@@ -0,0 +1,39 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useReducer = _react.useReducer
+local themeReducer = TS.import(script, script.Parent, "reducer").default
+local _theme = TS.import(script, script.Parent.Parent)
+local INITIAL_THEME_STATE = _theme.INITIAL_THEME_STATE
+local ThemeActionTypes = _theme.ThemeActionTypes
+local ThemeContext = React.createContext({
+	state = INITIAL_THEME_STATE,
+	dispatch = nil,
+})
+local function ThemeProvider(props)
+	local _binding = props
+	local theme = _binding.theme
+	local _object = table.clone(INITIAL_THEME_STATE)
+	setmetatable(_object, nil)
+	_object.theme = theme or INITIAL_THEME_STATE.theme
+	local state, dispatch = useReducer(themeReducer, _object)
+	useEffect(function()
+		dispatch({
+			type = ThemeActionTypes.Hydrate,
+		})
+	end, { dispatch })
+	return React.createElement(ThemeContext.Provider, {
+		value = {
+			state = state,
+			dispatch = dispatch,
+		},
+	}, props.children)
+end
+local default = ThemeContext
+return {
+	ThemeProvider = ThemeProvider,
+	ThemeContext = ThemeContext,
+	default = default,
+}

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

@@ -0,0 +1,3 @@
+import { ThemeAction, ThemeState } from "../types/index";
+declare function themeReducer(state: ThemeState | undefined, action: ThemeAction): ThemeState;
+export default themeReducer;

package/out/theme/context/reducer.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local INITIAL_THEME_STATE = TS.import(script, script.Parent.Parent, "constants").INITIAL_THEME_STATE
+local ThemeActionTypes = TS.import(script, script.Parent.Parent, "enums").ThemeActionTypes
+local function themeReducer(state, action)
+	if action.type == ThemeActionTypes.Hydrate then
+		local _object = table.clone(INITIAL_THEME_STATE)
+		setmetatable(_object, nil)
+		_object.theme = action.theme or INITIAL_THEME_STATE.theme
+		return _object
+	end
+	if not state then
+		error(error("State is undefined"))
+	end
+	if action.type == ThemeActionTypes.SetTheme then
+		local _object = table.clone(state)
+		setmetatable(_object, nil)
+		_object.theme = action.theme
+		return _object
+	end
+	error(error(`Unhandled action type: {action}`))
+end
+local default = themeReducer
+return {
+	default = default,
+}

package/out/theme/enums/ThemeActionTypes.d.ts

@@ -0,0 +1,4 @@
+export declare enum ThemeActionTypes {
+    Hydrate = "Hydrate",
+    SetTheme = "SetTheme"
+}

package/out/theme/enums/ThemeActionTypes.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local ThemeActionTypes = {
+	Hydrate = "Hydrate",
+	SetTheme = "SetTheme",
+}
+return {
+	ThemeActionTypes = ThemeActionTypes,
+}

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

@@ -0,0 +1 @@
+export * from "./ThemeActionTypes";

package/out/theme/enums/init.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "ThemeActionTypes") or {} do
+	exports[_k] = _v
+end
+return exports

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

@@ -0,0 +1 @@
+export { default as useTheme } from "./useTheme";

package/out/theme/hooks/init.luau

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

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

@@ -0,0 +1,5 @@
+declare function useTheme(): {
+    state: import("../index").ThemeState;
+    dispatch: import("../index").ThemeDispatch | undefined;
+};
+export default useTheme;

package/out/theme/hooks/useTheme.luau

@@ -0,0 +1,15 @@
+-- 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()
+	local context = useContext(ThemeContext)
+	if not context then
+		error(error("Missing ThemeProvider"))
+	end
+	return context
+end
+local default = useTheme
+return {
+	default = default,
+}

package/out/theme/index.d.ts

@@ -1,14 +1,20 @@
 export { default as Theme } from "./interfaces/theme/Theme";
-export { ThemeProvider } from "./components/index";
-export { ThemeState } from "./components/index";
-export * from "./components/index";
+export { useThemeCallbacks } from "./callbacks/index";
 export * from "./constants/index";
+export * from "./context/index";
+export { ThemeProvider } from "./context/index";
+export { themeReducer } from "./context/index";
+export * from "./enums/index";
+export { useTheme } from "./hooks/index";
 export * from "./interfaces/index";
 export * from "./styles/index";
 export * from "./themes/index";
 export { default as DefaultTheme } from "./themes/index";
 export { default as DarkTheme } from "./themes/DarkTheme";
 export { default as LightTheme } from "./themes/LightTheme";
+export { ThemeState } from "./types/index";
+export { ThemeAction } from "./types/index";
+export { ThemeDispatch } from "./types/index";
 export { CommonProps } from "./types/index";
 export { BaseDefaultProps } from "./types/index";
 export { BaseCustomizedProps } from "./types/index";

package/out/theme/init.luau

@@ -1,13 +1,19 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-exports.ThemeProvider = TS.import(script, script, "components").ThemeProvider
-for _k, _v in TS.import(script, script, "components") or {} do
+exports.useThemeCallbacks = TS.import(script, script, "callbacks").useThemeCallbacks
+for _k, _v in TS.import(script, script, "constants") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "constants") or {} do
+for _k, _v in TS.import(script, script, "context") or {} do
+	exports[_k] = _v
+end
+exports.ThemeProvider = TS.import(script, script, "context").ThemeProvider
+exports.themeReducer = TS.import(script, script, "context").themeReducer
+for _k, _v in TS.import(script, script, "enums") or {} do
 	exports[_k] = _v
 end
+exports.useTheme = TS.import(script, script, "hooks").useTheme
 for _k, _v in TS.import(script, script, "interfaces") or {} do
 	exports[_k] = _v
 end

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

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

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

@@ -0,0 +1,13 @@
+import { ThemeActionTypes } from "../enums/index";
+import { Theme } from "../interfaces/index";
+export interface ThemeState {
+    theme: Theme;
+}
+export type ThemeAction = {
+    type: ThemeActionTypes.Hydrate;
+    theme?: Theme;
+} | {
+    type: ThemeActionTypes.SetTheme;
+    theme: Theme;
+};
+export type ThemeDispatch = React.Dispatch<ThemeAction>;

package/out/theme/types/context.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

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

@@ -1,3 +1,6 @@
+export { ThemeState } from "./context";
+export { ThemeAction } from "./context";
+export { ThemeDispatch } from "./context";
 export { CommonProps } from "./types";
 export { BaseDefaultProps } from "./types";
 export { BaseCustomizedProps } from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.38",
+	"version": "0.1.40",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {
@@ -50,8 +50,6 @@
 		"@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"
 	},
 	"directories": {

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

@@ -1,7 +0,0 @@
-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

@@ -1,12 +0,0 @@
--- 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,7 +0,0 @@
-import { Theme } from "../interfaces/theme/index";
-import { CustomizedProps } from "../types/index";
-export interface ThemeProviderProps {
-    theme?: Theme;
-}
-declare function ThemeProvider(props: CustomizedProps<Instance, ThemeProviderProps>): JSX.Element;
-export default ThemeProvider;

package/out/theme/components/ThemeProvider.luau

@@ -1,22 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-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 React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
-		producer = themeProducer,
-	}, React.createElement(ThemeWrapper, {
-		theme = theme,
-	}, children)))
-end
-local default = ThemeProvider
-return {
-	default = default,
-}

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

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

package/out/theme/components/ThemeWrapper.luau

@@ -1,32 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-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 _binding_1 = useProducer()
-	local setTheme = _binding_1.setTheme
-	local ref = useRef()
-	-- When theme prop changes
-	useEffect(function()
-		setTheme(theme or DefaultTheme)
-	end, { theme })
-	return React.createElement("frame", {
-		key = `ThemeWrapper-{themeProducer:getState().type}`,
-		BackgroundTransparency = 1,
-		Size = UDim2.new(1, 0, 1, 0),
-		ZIndex = 500000,
-		ref = ref,
-	}, children)
-end
-local default = ThemeWrapper
-return {
-	default = default,
-}

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

@@ -1,5 +0,0 @@
-export { default as ThemeProvider } from "./ThemeProvider";
-export { ThemeProviderProps } from "./ThemeProvider";
-export * from "./ThemeProvider";
-export { ThemeState } from "./ThemeProducer";
-export { ThemeProducer } from "./ThemeProducer";

package/out/theme/components/init.luau

@@ -1,8 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local exports = {}
-exports.ThemeProvider = TS.import(script, script, "ThemeProvider").default
-for _k, _v in TS.import(script, script, "ThemeProvider") or {} do
-	exports[_k] = _v
-end
-return exports