@rbxts/react-clean-ui 1.0.5

package/out/Providers/registry.provider.luau

@@ -0,0 +1,119 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+-- This registry is used to keep a global map of GuiObjects => React components
+-- For example Droppable zones use this to register themselves
+local DroppableRegistryKey = {
+	name = "Droppable",
+}
+local DraggableRegistryKey = {
+	name = "Draggable",
+}
+local RegistryContext = React.createContext(nil)
+local function RegistryProvider(props)
+	local entries = React.useRef({})
+	local register = function(guiObject, key, value)
+		local _current = entries.current
+		local _name = key.name
+		local keyEntries = _current[_name]
+		if keyEntries == nil then
+			keyEntries = {}
+			local _current_1 = entries.current
+			local _name_1 = key.name
+			local _keyEntries = keyEntries
+			_current_1[_name_1] = _keyEntries
+		end
+		local _keyEntries = keyEntries
+		local _guiObject = guiObject
+		local _value = value
+		_keyEntries[_guiObject] = _value
+	end
+	local unregister = function(guiObject, key)
+		local _current = entries.current
+		local _name = key.name
+		local keyEntries = _current[_name]
+		if keyEntries == nil then
+			return nil
+		end
+		local _guiObject = guiObject
+		keyEntries[_guiObject] = nil
+		-- ▼ ReadonlyMap.size ▼
+		local _size = 0
+		for _ in keyEntries do
+			_size += 1
+		end
+		-- ▲ ReadonlyMap.size ▲
+		if _size == 0 then
+			local _current_1 = entries.current
+			local _name_1 = key.name
+			_current_1[_name_1] = nil
+		end
+	end
+	local get = function(guiObject, key)
+		local _current = entries.current
+		local _name = key.name
+		local _result = _current[_name]
+		if _result ~= nil then
+			local _guiObject = guiObject
+			_result = _result[_guiObject]
+		end
+		return _result
+	end
+	local getAll = function(key)
+		local _current = entries.current
+		local _name = key.name
+		local keyEntries = _current[_name]
+		if keyEntries == nil then
+			return {}
+		end
+		local result = {}
+		for _, value in keyEntries do
+			table.insert(result, value)
+		end
+		return result
+	end
+	local contextValue = {
+		register = register,
+		unregister = unregister,
+		get = get,
+		getAll = getAll,
+	}
+	return React.createElement(RegistryContext.Provider, {
+		value = contextValue,
+	}, props.children)
+end
+local function useRegistryRegistration(key, createRegistration, dependencies)
+	local registry = React.useContext(RegistryContext)
+	local guiObject, setGuiObject = React.useState()
+	local _exp = function()
+		if guiObject == nil then
+			return nil
+		end
+		return createRegistration(guiObject)
+	end
+	local _array = { guiObject }
+	local _length = #_array
+	table.move(dependencies, 1, #dependencies, _length + 1, _array)
+	local registration = React.useMemo(_exp, _array)
+	React.useEffect(function()
+		if registry == nil or guiObject == nil or registration == nil then
+			return nil
+		end
+		registry.register(guiObject, key, registration)
+		return function()
+			registry.unregister(guiObject, key)
+		end
+	end, { registry, guiObject, key, registration })
+	return {
+		ref = setGuiObject,
+		guiObject = guiObject,
+		registration = registration,
+	}
+end
+return {
+	RegistryProvider = RegistryProvider,
+	useRegistryRegistration = useRegistryRegistration,
+	DroppableRegistryKey = DroppableRegistryKey,
+	DraggableRegistryKey = DraggableRegistryKey,
+	RegistryContext = RegistryContext,
+}

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

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { CleanTheme } from "../Theme";
+interface ThemeProviderProps {
+    theme: CleanTheme;
+    children?: React.ReactNode;
+}
+export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
+export {};

package/out/Providers/theme.provider.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent, "Contexts").CleanThemeContext
+local function ThemeProvider(props)
+	return React.createElement(CleanThemeContext.Provider, {
+		value = props.theme,
+	}, props.children)
+end
+return {
+	ThemeProvider = ThemeProvider,
+}

package/out/Theme/CleanTheme.d.ts

@@ -0,0 +1,169 @@
+import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag } from "../Interfaces/";
+export interface TypographyStyle {
+    font: Enum.Font;
+    size: Enum.FontSize;
+    weight?: Enum.FontWeight;
+    lineHeight?: number;
+}
+export type ScaledTypographyStyle = Partial<Record<ScaleSize, Partial<TypographyStyle>>>;
+export interface IntentScheme {
+    textColor: Color3;
+    backgroundColor: Color3;
+    borderColor: Color3;
+    backgroundTransparency?: number;
+    boxShadow?: CssShadow;
+    typography?: Partial<TypographyStyle>;
+}
+export interface IntentColors extends Partial<Record<ButtonFlag, IntentScheme>> {
+    default: IntentScheme;
+    hover?: IntentScheme;
+    focus?: IntentScheme;
+}
+export type InlineIntentColors = {
+    [State in keyof IntentColors]?: Partial<NonNullable<IntentColors[State]>>;
+};
+export interface CleanTheme {
+    colors: {
+        intents: Record<Intent, IntentColors>;
+    };
+    breakpoints: BreakpointValue<number>;
+    default: {
+        scale: ScaleSize;
+        spacing: ScaleSize;
+    };
+    spacing: ScaleSizeValue<number>;
+    radius: {
+        sm: number;
+        md: number;
+        lg: number;
+        default: Breakpoint;
+    };
+    typography: {
+        display: TypographyStyle;
+        title: TypographyStyle;
+        heading: TypographyStyle;
+        body: TypographyStyle;
+        label: TypographyStyle;
+        caption: TypographyStyle;
+    };
+    typeScaleMap: Record<ScaleSize, TextVariant>;
+    components: {
+        draggable: {
+            placeholder: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+            };
+        };
+        scroller: {
+            barColor: Color3;
+        };
+        boxShadow: {
+            color: Color3;
+            transparency: number;
+        };
+        box: {
+            backgroundColor: Color3;
+            backgroundTransparency: number;
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            boxShadow?: CssShadow;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+        };
+        button: {
+            backgroundTransparency: number;
+            cornerRadius: CssSize;
+            boxShadow?: CssShadow;
+            borderThickness: number;
+            typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+        };
+        input: {
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+        };
+        select: {
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            dropDownBackgroundColor: Color3;
+            typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+            maxDropDownHeight: number;
+        };
+        checkbox: {
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+            spacing?: ScaleSizeValue<number>;
+        };
+        tabs: {
+            borderColor: Color3;
+            backgroundColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            spacing?: ScaleSizeValue<number>;
+            list: {
+                borderColor?: Color3;
+                backgroundColor?: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                spacing?: ScaleSizeValue<number>;
+            };
+            button: {
+                borderThickness: number;
+                cornerRadius: CssSize;
+                spacing?: ScaleSizeValue<number>;
+                boxShadow?: CssShadow;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+            };
+        };
+        card: {
+            borderThickness: number;
+            cornerRadius: CssSize;
+            header: {
+                spacing?: ScaleSizeValue<number>;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+            };
+            footer: {
+                spacing?: ScaleSizeValue<number>;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+            };
+        };
+        slider: {
+            height: CssSize;
+            bar: {
+                height: CssSize;
+                padding: CssSize;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                highlight: {
+                    borderColor: Color3;
+                    backgroundColor: Color3;
+                    backgroundTransparency: number;
+                };
+            };
+            handle: {
+                boxShadow?: CssShadow;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                aspectRation?: number;
+            };
+        };
+    };
+    icons: Partial<IconSet>;
+    iconSize: ScaleSizeValue<number>;
+}

package/out/Theme/CleanTheme.luau

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

package/out/Theme/DefaultIcons.d.ts

@@ -0,0 +1,2 @@
+import { IconSet } from "../Interfaces";
+export declare const DefaultIconSet: IconSet;