@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Helpers/typography.helper.luau

@@ -37,7 +37,6 @@ do
 	function TypographyHelper:getClosestTypography(typography, scale)
 		local _scale = scale
 		local scaleIndex = (table.find(ScaleSizes, _scale) or 0) - 1
-		-- Prefer the exact scale, then progressively smaller scales.
 		do
 			local index = scaleIndex
 			local _shouldIncrement = false
@@ -56,7 +55,6 @@ do
 				end
 			end
 		end
-		-- If no smaller scale exists, use the nearest larger scale.
 		do
 			local index = scaleIndex + 1
 			local _shouldIncrement = false

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

@@ -28,3 +28,10 @@ export type CssBoxShadow = {
 export type CssPadding = CssQuad;
 export type ScaledCssPadding = CssPadding | ScaleSizeValue<CssPadding>;
 export type ResponsiveCssSize = CssSize | CssBreakpointSize;
+export type CssBackgroundGradient = {
+    colors: Color3[] | ColorSequence;
+    stops?: number[];
+    rotation?: number;
+    offset?: Vector2;
+    transparency?: number | NumberSequence;
+};

package/out/Interfaces/css.types.luau

@@ -1,21 +1 @@
 -- Compiled with roblox-ts v3.0.0
--- The one CSS calc() shape supported on top of CssSize: a percent term
--- plus/minus a pixel term (e.g. "100% - 50px"), which maps directly onto
--- UDim(scale, offset) — no general calc() parser needed for anything beyond
--- this two-term form. Deliberately kept as its own type rather than folded
--- directly into CssSize: CssSize is composed multiple times over in CssQuad/
--- CssDual (a 4-term CssQuad is `${CssSize} ${CssSize} ${CssSize} ${CssSize}`),
--- so widening CssSize itself multiplies out through every one of those
--- combinations — doing so was observed to blow past TypeScript's template-
--- literal complexity limit ("union type that is too complex to represent")
--- at unrelated call sites that spread a large props object containing
--- several CssQuad-shaped fields (e.g. Button.tsx's `<BoxShadow {...props} />`).
--- Use CssCalcSize only where a calc() term is actually needed (currently
--- just CssPosition.width) rather than everywhere CssSize appears.
--- 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/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/Providers/registry.provider.luau

@@ -2,8 +2,6 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local HttpService = TS.import(script, TS.getModule(script, "@rbxts", "services")).HttpService
--- 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",
 }

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

@@ -1,5 +1,5 @@
 import { Binding } from "@rbxts/react";
-import { ScaleSize, CssShadow, ButtonFlag, CssDual, CssSliceInset, CssSize, CssCalcSize } from "../Interfaces/";
+import { ScaleSize, CssShadow, ButtonFlag, CssDual, CssSliceInset, CssSize, CssCalcSize, CssBackgroundGradient } from "../Interfaces/";
 export interface TypographyStyle {
     font: Enum.Font;
     size: Enum.FontSize;
@@ -18,6 +18,7 @@ export interface IntentScheme {
     boxShadow?: CssShadow;
     typography?: Partial<TypographyStyle>;
     backgroundImage?: Partial<CssBackgroundImage>;
+    backgroundGradient?: Partial<CssBackgroundGradient>;
 }
 export interface IntentColors extends Partial<Record<ButtonFlag, IntentScheme>> {
     default: IntentScheme;

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

@@ -1,4 +1,4 @@
-import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow } from "../Interfaces/";
+import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow, CssBackgroundGradient } from "../Interfaces/";
 import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition } from "./theme.style";
 export interface ThemeTemplate {
     colors: {
@@ -52,6 +52,7 @@ export interface ThemeTemplate {
             padding?: ScaledCssPadding;
             boxShadow?: CssShadow;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
         button: {
@@ -71,17 +72,32 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             placeholder?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            iconColor?: Color3;
         };
         select: {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
             dropDownBackgroundColor: Color3;
             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;
@@ -92,11 +108,38 @@ export interface ThemeTemplate {
             spacing?: ScaleSizeValue<number>;
             padding?: ScaledCssPadding;
             backgroundImage?: CssBackgroundImage;
+            backgroundGradient?: CssBackgroundGradient;
+        };
+        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;
+            backgroundGradient?: CssBackgroundGradient;
             borderThickness: number;
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
@@ -110,6 +153,7 @@ export interface ThemeTemplate {
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 backgroundImage?: CssBackgroundImage;
+                backgroundGradient?: CssBackgroundGradient;
             };
             button: {
                 borderThickness: number;
@@ -121,6 +165,24 @@ export interface ThemeTemplate {
                 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>>;
+            };
+        };
         accordion: {
             borderColor: Color3;
             borderThickness: number;
@@ -144,6 +206,25 @@ 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;
@@ -192,6 +273,40 @@ export interface ThemeTemplate {
                 aspectRatio?: number;
             };
         };
+        progressBar: {
+            height: ScaleSizeValue<CssSize>;
+            animation: {
+                duration: number;
+            };
+            header: {
+                spacing?: ScaleSizeValue<number>;
+                label: {
+                    typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                };
+                value: {
+                    typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                };
+            };
+            track: {
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                backgroundImage?: CssBackgroundImage;
+                backgroundGradient?: CssBackgroundGradient;
+            };
+            fill: {
+                cornerRadius: CssSize;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+                stripe?: {
+                    enabled: boolean;
+                    image?: Omit<Partial<CssBackgroundImage>, "size">;
+                    duration?: number;
+                    direction?: number;
+                };
+            };
+        };
         toast: {
             width: CssSize;
             fadeDuration: number;
@@ -217,6 +332,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: {