@rbxts/react-clean-ui 1.0.38 → 1.2.2

package/out/Helpers/spacing.helper.luau

@@ -1,4 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local CssHelper = TS.import(script, script.Parent, "css.helper").CssHelper
 local SpacingHelper
 do
 	SpacingHelper = setmetatable({}, {
@@ -13,35 +15,117 @@ do
 	end
 	function SpacingHelper:constructor()
 	end
-	function SpacingHelper:GetResolvedPadding(theme, props, component)
-		local amount = self:GetPadding(theme, props.spacing, component)
-		return {
-			top = if props.top then self:GetPadding(theme, props.top) else amount,
-			bottom = if props.bottom then self:GetPadding(theme, props.bottom) else amount,
-			left = if props.left then self:GetPadding(theme, props.left) else amount,
-			right = if props.right then self:GetPadding(theme, props.right) else amount,
-		}
-	end
 	function SpacingHelper:GetPadding(theme, spacing, component)
 		if spacing == "None" then
 			return 0
 		end
-		local resolveSpacing = if spacing ~= nil then spacing else theme.default.spacing
-		local _result
-		if component ~= nil then
-			local _condition = component[resolveSpacing]
+		local key = spacing or theme.default.spacing
+		local _result = component
+		if _result ~= nil then
+			_result = _result[key]
+		end
+		local _condition = _result
+		if _condition == nil then
+			_condition = theme.spacing[key]
 			if _condition == nil then
 				_condition = 0
 			end
-			_result = _condition
+		end
+		return _condition
+	end
+	function SpacingHelper:GetResolvedPadding(theme, props, componentSpacing, componentPadding, defaultSpacing)
+		if props.resolvedPadding ~= nil then
+			return props.resolvedPadding
+		end
+		local isNone = props.spacing == "None"
+		local key = if props.spacing ~= nil and props.spacing ~= "None" then props.spacing else (defaultSpacing or theme.default.spacing)
+		-- tier 3: a scale-indexed map picks the quad for the active key
+		-- (falling through to tiers 1/2 if that key isn't defined in the
+		-- map); a plain quad applies regardless of key.
+		local _result
+		if isNone or componentPadding == nil then
+			_result = nil
+		else
+			local _componentPadding = componentPadding
+			_result = if type(_componentPadding) == "table" then componentPadding[key] else componentPadding
+		end
+		local quadForKey = _result
+		local base = if quadForKey ~= nil then CssHelper:parseCssQuad(quadForKey) else self:ResolveNumberPadding(if isNone then 0 else self:GetPadding(theme, key, componentSpacing))
+		local instanceQuad = if props.padding ~= nil then CssHelper:parseCssQuad(props.padding) else nil
+		local _object = {}
+		local _left = "top"
+		local _result_1
+		if props.top ~= nil then
+			_result_1 = self:GetPadding(theme, props.top, componentSpacing)
 		else
-			local _condition = theme.spacing[resolveSpacing]
+			local _result_2 = instanceQuad
+			if _result_2 ~= nil then
+				_result_2 = _result_2.top
+			end
+			local _condition = _result_2
 			if _condition == nil then
-				_condition = 0
+				_condition = base.top
+			end
+			_result_1 = _condition
+		end
+		_object[_left] = _result_1
+		local _left_1 = "bottom"
+		local _result_2
+		if props.bottom ~= nil then
+			_result_2 = self:GetPadding(theme, props.bottom, componentSpacing)
+		else
+			local _result_3 = instanceQuad
+			if _result_3 ~= nil then
+				_result_3 = _result_3.bottom
+			end
+			local _condition = _result_3
+			if _condition == nil then
+				_condition = base.bottom
+			end
+			_result_2 = _condition
+		end
+		_object[_left_1] = _result_2
+		local _left_2 = "left"
+		local _result_3
+		if props.left ~= nil then
+			_result_3 = self:GetPadding(theme, props.left, componentSpacing)
+		else
+			local _result_4 = instanceQuad
+			if _result_4 ~= nil then
+				_result_4 = _result_4.left
+			end
+			local _condition = _result_4
+			if _condition == nil then
+				_condition = base.left
 			end
-			_result = _condition
+			_result_3 = _condition
+		end
+		_object[_left_2] = _result_3
+		local _left_3 = "right"
+		local _result_4
+		if props.right ~= nil then
+			_result_4 = self:GetPadding(theme, props.right, componentSpacing)
+		else
+			local _result_5 = instanceQuad
+			if _result_5 ~= nil then
+				_result_5 = _result_5.right
+			end
+			local _condition = _result_5
+			if _condition == nil then
+				_condition = base.right
+			end
+			_result_4 = _condition
+		end
+		_object[_left_3] = _result_4
+		return _object
+	end
+	function SpacingHelper:GetExplicitPadding(componentPadding, key)
+		if componentPadding == nil then
+			return nil
 		end
-		return _result
+		local _componentPadding = componentPadding
+		local quad = if type(_componentPadding) == "table" then componentPadding[key] else componentPadding
+		return if quad ~= nil then CssHelper:parseCssQuad(quad) else nil
 	end
 	function SpacingHelper:ResolveNumberPadding(value)
 		return {

package/out/Interfaces/css.types.d.ts

@@ -1,3 +1,4 @@
+import { ScaleSizeValue } from "./responsive.types";
 export type CssUnit = "px" | "%";
 export type CssSize = "Auto" | number | `${number}` | `${number}${CssUnit}`;
 export type CssCalcSize = CssSize | `${number}% - ${number}px` | `${number}% + ${number}px`;
@@ -25,4 +26,5 @@ export type CssBoxShadow = {
     transparency: number;
 };
 export type CssPadding = CssQuad;
+export type ScaledCssPadding = CssPadding | ScaleSizeValue<CssPadding>;
 export type ResponsiveCssSize = CssSize | CssBreakpointSize;

package/out/Interfaces/css.types.luau

@@ -15,3 +15,7 @@
 -- absolute pixel corner coordinates for Rect.new(minX, minY, maxX, maxY)-style slicing,
 -- e.g. Roblox's SliceCenter — not a CSS border-image-slice edge-inset shorthand, since
 -- Roblox has no intrinsic-image-size equivalent to derive corners from an inset alone
+-- A CssPadding quad, or a scale-key-indexed map of quads (e.g. a component's
+-- theme.components.X.padding tier, which can pick a different quad shape per
+-- spacing scale key the same way theme.components.X.spacing does for the
+-- numeric tier).

package/out/Interfaces/index.d.ts

@@ -1,5 +1,5 @@
-export * from './css.types';
+export type * from './css.types';
 export * from './responsive.types';
-export * from './element.props';
-export * from './semantics';
-export * from './icon';
+export type * from './element.props';
+export type * from './semantics';
+export type * from './icon';

package/out/Interfaces/init.luau

@@ -1,19 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-for _k, _v in TS.import(script, script, "css.types") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "responsive.types") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "element.props") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "semantics") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "icon") or {} do
-	exports[_k] = _v
-end
 return exports

package/out/Providers/app.provider.luau

@@ -5,6 +5,7 @@ local ToastContainer = TS.import(script, script.Parent.Parent, "Components", "In
 local RegistryProvider = TS.import(script, script.Parent, "registry.provider").RegistryProvider
 local ThemeProvider = TS.import(script, script.Parent, "theme.provider").ThemeProvider
 local OverlayProvider = TS.import(script, script.Parent, "overlay.provider").OverlayProvider
+local ModalProvider = TS.import(script, script.Parent, "modal.provider").ModalProvider
 local ToastProvider = TS.import(script, script.Parent, "toast.provider").ToastProvider
 local function CleanUiProvider(_param)
 	local children = _param.children
@@ -15,7 +16,7 @@ local function CleanUiProvider(_param)
 	end
 	return React.createElement(RegistryProvider, nil, React.createElement(ThemeProvider, {
 		theme = theme,
-	}, React.createElement(OverlayProvider, nil, React.createElement(ToastProvider, nil, children, toasts and React.createElement(ToastContainer)))))
+	}, React.createElement(OverlayProvider, nil, React.createElement(ModalProvider, nil, React.createElement(ToastProvider, nil, children, toasts and React.createElement(ToastContainer))))))
 end
 return {
 	CleanUiProvider = CleanUiProvider,

package/out/Providers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './modal.provider';
 export * from './overlay.provider';
 export * from './registry.provider';
 export * from './theme.provider';

package/out/Providers/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "modal.provider") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "overlay.provider") or {} do
 	exports[_k] = _v
 end

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

@@ -0,0 +1,6 @@
+import React from "@rbxts/react";
+interface ModalProviderProps {
+    children?: React.ReactNode;
+}
+export declare function ModalProvider(props: ModalProviderProps): React.JSX.Element;
+export {};

package/out/Providers/modal.provider.luau

@@ -0,0 +1,86 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ModalStackContext = TS.import(script, script.Parent.Parent, "Contexts", "modal.context").ModalStackContext
+local CustomInputService = TS.import(script, script.Parent.Parent, "Helpers", "input.helper").CustomInputService
+local function ModalProvider(props)
+	local stack, setStack = React.useState({})
+	local stackRef = React.useRef(stack)
+	React.useEffect(function()
+		stackRef.current = stack
+	end, { stack })
+	local register = React.useCallback(function(layer)
+		setStack(function(current)
+			local _array = {}
+			local _length = #_array
+			local _currentLength = #current
+			table.move(current, 1, _currentLength, _length + 1, _array)
+			_length += _currentLength
+			_array[_length + 1] = layer
+			return _array
+		end)
+	end, {})
+	local unregister = React.useCallback(function(id)
+		setStack(function(current)
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue = {}
+			local _callback = function(layer)
+				return layer.id ~= id
+			end
+			local _length = 0
+			for _k, _v in current do
+				if _callback(_v, _k - 1, current) == true then
+					_length += 1
+					_newValue[_length] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			return _newValue
+		end)
+	end, {})
+	local getLayerIndex = React.useCallback(function(id)
+		-- ▼ ReadonlyArray.findIndex ▼
+		local _callback = function(layer)
+			return layer.id == id
+		end
+		local _result = -1
+		for _i, _v in stack do
+			if _callback(_v, _i - 1, stack) == true then
+				_result = _i - 1
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.findIndex ▲
+		return _result
+	end, { stack })
+	React.useEffect(function()
+		local connection = CustomInputService.InputBegan:Connect(function(input, gameProcessed)
+			if gameProcessed then
+				return nil
+			end
+			if input.KeyCode ~= Enum.KeyCode.Escape and input.KeyCode ~= Enum.KeyCode.ButtonB then
+				return nil
+			end
+			local top = stackRef.current[#stackRef.current]
+			if top ~= nil and top.closeOnEscape() then
+				top.requestClose()
+			end
+		end)
+		return function()
+			connection:Disconnect()
+		end
+	end, {})
+	local value = React.useMemo(function()
+		return {
+			register = register,
+			unregister = unregister,
+			getLayerIndex = getLayerIndex,
+		}
+	end, { register, unregister, getLayerIndex })
+	return React.createElement(ModalStackContext.Provider, {
+		value = value,
+	}, props.children)
+end
+return {
+	ModalProvider = ModalProvider,
+}

package/out/Providers/overlay.provider.luau

@@ -11,6 +11,7 @@ local function OverlayProvider(props)
 			overlay = overlay,
 		},
 	}, props.children, React.createElement("frame", {
+		key = "OverlayProvider",
 		ref = function(instance)
 			setOverlay(instance)
 		end,

package/out/Theme/theme.template.d.ts

@@ -1,4 +1,4 @@
-import { CssShadow, CssSize, CssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow } from "../Interfaces/";
+import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow } from "../Interfaces/";
 import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition } from "./theme.style";
 export interface ThemeTemplate {
     colors: {
@@ -48,7 +48,8 @@ export interface ThemeTemplate {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
-            padding?: CssPadding;
+            spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
             boxShadow?: CssShadow;
             backgroundImage?: CssBackgroundImage;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -71,6 +72,7 @@ export interface ThemeTemplate {
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
             placeholder?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            iconColor?: Color3;
         };
         select: {
             borderColor: Color3;
@@ -81,6 +83,18 @@ export interface ThemeTemplate {
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
             maxDropDownHeight: number;
+            optGroup: {
+                textColor: Color3;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                backgroundColor?: Color3;
+                backgroundTransparency?: number;
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
+            };
+            search: {
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
+            };
         };
         checkbox: {
             borderColor: Color3;
@@ -89,14 +103,42 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
             spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
             backgroundImage?: CssBackgroundImage;
         };
+        switch: {
+            width: CssSize;
+            height: CssSize;
+            cornerRadius: CssSize;
+            borderThickness: number;
+            disabledTransparency: number;
+            animation: {
+                duration: number;
+            };
+            track: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                borderColor: Color3;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+            };
+            thumb: {
+                inset: CssSize;
+                cornerRadius: CssSize;
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                boxShadow?: CssShadow;
+            };
+        };
         tabs: {
             borderColor: Color3;
             backgroundColor: Color3;
+            backgroundImage?: CssBackgroundImage;
             borderThickness: number;
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
             list: {
                 borderColor?: Color3;
                 backgroundColor?: Color3;
@@ -104,12 +146,32 @@ export interface ThemeTemplate {
                 borderThickness: number;
                 cornerRadius: CssSize;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 backgroundImage?: CssBackgroundImage;
             };
             button: {
                 borderThickness: number;
                 cornerRadius: CssSize;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
+                boxShadow?: CssShadow;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+            };
+        };
+        pagination: {
+            backgroundColor: Color3;
+            backgroundTransparency: number;
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
+            item: {
+                borderThickness: number;
+                cornerRadius: CssSize;
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 boxShadow?: CssShadow;
                 typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -122,6 +184,7 @@ export interface ThemeTemplate {
             spacing?: ScaleSizeValue<number>;
             header: {
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
                 indicatorSize: number;
@@ -129,6 +192,7 @@ export interface ThemeTemplate {
             };
             content: {
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 backgroundColor: Color3;
                 backgroundTransparency: number;
             };
@@ -136,23 +200,45 @@ export interface ThemeTemplate {
                 duration: number;
             };
         };
+        table: {
+            backgroundColor: Color3;
+            backgroundTransparency: number;
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            rowDividerColor: Color3;
+            rowDividerThickness: number;
+            header: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            };
+            cell: {
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            };
+        };
         card: {
             borderThickness: number;
             cornerRadius: CssSize;
             header: {
                 borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
                 position?: CssPosition;
             };
             footer: {
                 borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
                 position?: CssPosition;
             };
             body?: {
-                padding?: CssPadding;
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
             };
         };
         slider: {
@@ -206,6 +292,16 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
         };
+        modal: {
+            fadeDuration: number;
+            baseZIndex: number;
+            zIndexStep: number;
+            width?: CssSize;
+            backdrop: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+            };
+        };
         charts: {
             colors: Color3[];
             pie: {

package/out/Theme/themes/dark.theme.luau

@@ -214,6 +214,7 @@ local DarkTheme = createTheme({
 			placeholder = {
 				color = Color3.fromHex("#697386"),
 			},
+			iconColor = Color3.fromHex("#697386"),
 		},
 		select = {
 			dropDownBackgroundColor = Color3.fromHex("#20252E"),
@@ -238,6 +239,25 @@ local DarkTheme = createTheme({
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#8892A6"),
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
+			search = {
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
 		},
 		checkbox = {
 			borderColor = Color3.fromHex("#3A4352"),
@@ -251,6 +271,30 @@ local DarkTheme = createTheme({
 				xl = 8,
 			},
 		},
+		switch = {
+			width = 40,
+			height = 22,
+			cornerRadius = "100%",
+			borderThickness = 1,
+			disabledTransparency = 0.5,
+			animation = {
+				duration = 0.15,
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#2A303B"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#3A4352"),
+			},
+			thumb = {
+				inset = 2,
+				cornerRadius = "100%",
+				backgroundColor = Color3.fromHex("#E8EDF8"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#4B74C7"),
+				borderThickness = 1,
+				boxShadow = "0px 0px 2px 1px",
+			},
+		},
 		tabs = {
 			borderColor = Color3.fromHex("#343B49"),
 			backgroundColor = Color3.fromHex("#1B1F27"),
@@ -301,6 +345,57 @@ local DarkTheme = createTheme({
 				},
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#14181F"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#343B49"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			spacing = {
+				xs = 2,
+				sm = 4,
+				md = 6,
+				lg = 8,
+				xl = 12,
+			},
+			item = {
+				borderThickness = 0,
+				cornerRadius = 4,
+				spacing = {
+					xs = 1,
+					sm = 2,
+					md = 4,
+					lg = 6,
+					xl = 8,
+				},
+				intents = {
+					primary = {
+						default = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#AAB3C2"),
+						},
+						hover = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#FFFFFF"),
+						},
+						focus = {
+							textColor = Color3.fromHex("#FFFFFF"),
+							backgroundColor = Color3.fromHex("#2A303B"),
+							backgroundTransparency = 0,
+							boxShadow = "2px 2px 6px 0px",
+							typography = {
+								weight = Enum.FontWeight.Bold,
+							},
+						},
+						disabled = {
+							backgroundTransparency = 1,
+							borderColor = Color3.fromHex("#343B49"),
+							textColor = Color3.fromHex("#697386"),
+						},
+					},
+				},
+			},
+		},
 		accordion = {
 			borderColor = Color3.fromHex("#4B5568"),
 			header = {
@@ -330,6 +425,14 @@ local DarkTheme = createTheme({
 				backgroundColor = Color3.fromHex("#171B22"),
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#171B22"),
+			borderColor = Color3.fromHex("#4B5568"),
+			rowDividerColor = Color3.fromHex("#343C4A"),
+			header = {
+				backgroundColor = Color3.fromHex("#252B36"),
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#2A303B"),