@rbxts/react-clean-ui 1.1.0 → 1.2.2

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

@@ -72,6 +72,7 @@ export interface ThemeTemplate {
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
             placeholder?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            iconColor?: Color3;
         };
         select: {
             borderColor: Color3;
@@ -82,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;
@@ -93,6 +106,31 @@ export interface ThemeTemplate {
             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;
@@ -121,6 +159,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 +200,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;
@@ -217,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"),

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

@@ -194,6 +194,7 @@ local DefaultTheme = {
 			placeholder = {
 				color = Color3.fromHex("#8A8A8A"),
 			},
+			iconColor = Color3.fromHex("#8A8A8A"),
 		},
 		select = {
 			dropDownBackgroundColor = Color3.fromHex("#FFFFFF"),
@@ -216,6 +217,25 @@ local DefaultTheme = {
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#5C6577"),
+				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("#D9DEE8"),
@@ -229,6 +249,30 @@ local DefaultTheme = {
 				xl = 8,
 			},
 		},
+		switch = {
+			width = 40,
+			height = 22,
+			cornerRadius = "100%",
+			borderThickness = 1,
+			disabledTransparency = 0.5,
+			animation = {
+				duration = 0.15,
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#D9DEE8"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#D9DEE8"),
+			},
+			thumb = {
+				inset = 2,
+				cornerRadius = "100%",
+				backgroundColor = Color3.fromHex("#FFFFFF"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#D9DEE8"),
+				borderThickness = 1,
+				boxShadow = "0px 0px 2px 1px",
+			},
+		},
 		tabs = {
 			borderColor = Color3.fromHex("#D9DEE8"),
 			backgroundColor = Color3.fromHex("#FFFFFF"),
@@ -279,6 +323,57 @@ local DefaultTheme = {
 				},
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#F5F5F5"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#D9DEE8"),
+			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("#4F4F4F"),
+						},
+						hover = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#000000"),
+						},
+						focus = {
+							textColor = Color3.fromHex("#000000"),
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundTransparency = 0,
+							boxShadow = "2px 2px 2px 2px",
+							typography = {
+								weight = Enum.FontWeight.Bold,
+							},
+						},
+						disabled = {
+							backgroundTransparency = 1,
+							borderColor = Color3.fromHex("#D9DEE8"),
+							textColor = Color3.fromHex("#8A8A8A"),
+						},
+					},
+				},
+			},
+		},
 		accordion = {
 			borderColor = Color3.fromHex("#D9DEE8"),
 			borderThickness = 1,
@@ -337,6 +432,31 @@ local DefaultTheme = {
 				duration = 0.2,
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#FFFFFF"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#D9DEE8"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			rowDividerColor = Color3.fromHex("#D9DEE8"),
+			rowDividerThickness = 1,
+			header = {
+				backgroundColor = Color3.fromHex("#F2F4F8"),
+				backgroundTransparency = 0,
+				typography = {
+					weight = Enum.FontWeight.Bold,
+				},
+			},
+			cell = {
+				spacing = {
+					xs = 4,
+					sm = 8,
+					md = 12,
+					lg = 16,
+					xl = 24,
+				},
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#D9DEE8"),
@@ -536,6 +656,16 @@ local DefaultTheme = {
 				},
 			},
 		},
+		modal = {
+			fadeDuration = 0.2,
+			baseZIndex = 1000,
+			zIndexStep = 10,
+			width = 420,
+			backdrop = {
+				backgroundColor = Color3.fromRGB(0, 0, 0),
+				backgroundTransparency = 0.5,
+			},
+		},
 		charts = {
 			colors = { Color3.fromHex("#2E9D63"), Color3.fromHex("#D64545"), Color3.fromHex("#E7A92F"), Color3.fromHex("#3187C8"), Color3.fromHex("#8E5AD7"), Color3.fromHex("#2FA7A1"), Color3.fromHex("#F26D4F"), Color3.fromHex("#D94F9D"), Color3.fromHex("#6B7C93"), Color3.fromHex("#7CB342") },
 			pie = {

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

@@ -211,6 +211,7 @@ local SandstoneTheme = createTheme({
 			borderColor = Color3.fromHex("#CDBFA8"),
 			borderThickness = 1,
 			cornerRadius = 4,
+			iconColor = Color3.fromHex("#8A7A61"),
 		},
 		select = {
 			dropDownBackgroundColor = Color3.fromHex("#FFF9ED"),
@@ -235,6 +236,25 @@ local SandstoneTheme = createTheme({
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#8A7A61"),
+				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("#CDBFA8"),
@@ -248,6 +268,30 @@ local SandstoneTheme = createTheme({
 				xl = 8,
 			},
 		},
+		switch = {
+			width = 40,
+			height = 22,
+			cornerRadius = 4,
+			borderThickness = 1,
+			disabledTransparency = 0.5,
+			animation = {
+				duration = 0.15,
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#EFE5D3"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#CDBFA8"),
+			},
+			thumb = {
+				inset = 2,
+				cornerRadius = 4,
+				backgroundColor = Color3.fromHex("#FFF9ED"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#CDBFA8"),
+				borderThickness = 1,
+				boxShadow = "0px 0px 2px 1px",
+			},
+		},
 		tabs = {
 			borderColor = Color3.fromHex("#D8CDBA"),
 			backgroundColor = Color3.fromHex("#FFF9ED"),
@@ -298,6 +342,57 @@ local SandstoneTheme = createTheme({
 				},
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#EFE5D3"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#D8CDBA"),
+			borderThickness = 1,
+			cornerRadius = 2,
+			spacing = {
+				xs = 2,
+				sm = 4,
+				md = 6,
+				lg = 8,
+				xl = 12,
+			},
+			item = {
+				borderThickness = 0,
+				cornerRadius = 2,
+				spacing = {
+					xs = 1,
+					sm = 2,
+					md = 4,
+					lg = 6,
+					xl = 8,
+				},
+				intents = {
+					primary = {
+						default = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#746754"),
+						},
+						hover = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#244F4A"),
+						},
+						focus = {
+							textColor = Color3.fromHex("#244F4A"),
+							backgroundColor = Color3.fromHex("#FFF9ED"),
+							backgroundTransparency = 0,
+							boxShadow = "0px 2px 5px 0px",
+							typography = {
+								weight = Enum.FontWeight.SemiBold,
+							},
+						},
+						disabled = {
+							backgroundTransparency = 1,
+							borderColor = Color3.fromHex("#D8CDBA"),
+							textColor = Color3.fromHex("#9B8B73"),
+						},
+					},
+				},
+			},
+		},
 		accordion = {
 			borderColor = Color3.fromHex("#B9A98F"),
 			header = {
@@ -327,6 +422,14 @@ local SandstoneTheme = createTheme({
 				backgroundColor = Color3.fromHex("#FFF9ED"),
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#FFF9ED"),
+			borderColor = Color3.fromHex("#B9A98F"),
+			rowDividerColor = Color3.fromHex("#D8CBB5"),
+			header = {
+				backgroundColor = Color3.fromHex("#EFE5D3"),
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#EFE5D3"),

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

@@ -163,6 +163,19 @@ local WoodenTheme = createTheme({
 				backgroundTransparency = 0,
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#5C3A18"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#3D2712"),
+			borderThickness = 2,
+			cornerRadius = 0,
+			rowDividerColor = Color3.fromHex("#3D2712"),
+			rowDividerThickness = 2,
+			header = {
+				backgroundColor = Color3.fromHex("#7A4A20"),
+				backgroundTransparency = 0,
+			},
+		},
 		tabs = {
 			backgroundImage = {
 				image = 137043424796720,
@@ -292,6 +305,7 @@ local WoodenTheme = createTheme({
 			placeholder = {
 				color = Color3.fromHex("#546b8a"),
 			},
+			iconColor = Color3.fromHex("#FFF7CF"),
 		},
 		card = {
 			borderThickness = 0,
@@ -441,6 +455,27 @@ local WoodenTheme = createTheme({
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#FFF7CF"),
+				backgroundColor = Color3.fromHex("#1F477D"),
+				backgroundTransparency = 0,
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
+			search = {
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
 		},
 		increment = {
 			button = {
@@ -492,6 +527,48 @@ local WoodenTheme = createTheme({
 				},
 			},
 		},
+		switch = {
+			track = {
+				backgroundColor = Color3.fromHex("#5C3A18"),
+				borderColor = Color3.fromHex("#3D2712"),
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#A16B30"),
+							borderColor = Color3.fromHex("#3D2712"),
+						},
+					},
+					success = {
+						default = {
+							backgroundColor = Color3.fromHex("#4E6A24"),
+							borderColor = Color3.fromHex("#3D2712"),
+						},
+					},
+					info = {
+						default = {
+							backgroundColor = Color3.fromHex("#2C5270"),
+							borderColor = Color3.fromHex("#3D2712"),
+						},
+					},
+					warning = {
+						default = {
+							backgroundColor = Color3.fromHex("#A67A20"),
+							borderColor = Color3.fromHex("#3D2712"),
+						},
+					},
+					danger = {
+						default = {
+							backgroundColor = Color3.fromHex("#7A3220"),
+							borderColor = Color3.fromHex("#3D2712"),
+						},
+					},
+				},
+			},
+			thumb = {
+				backgroundColor = Color3.fromHex("#BA854A"),
+				borderColor = Color3.fromHex("#3D2712"),
+			},
+		},
 		slider = {
 			height = 20,
 			bar = {
@@ -517,6 +594,51 @@ local WoodenTheme = createTheme({
 				cornerRadius = "100%",
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#5C3A18"),
+			backgroundTransparency = 1,
+			borderColor = Color3.fromHex("#331D07"),
+			borderThickness = 1,
+			cornerRadius = 0,
+			item = {
+				borderThickness = 0,
+				cornerRadius = 0,
+				intents = {
+					primary = {
+						default = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								image = 92016395170536,
+								slice = "10 5 240 40",
+								tintColor = Color3.fromHex("#A16B30"),
+							},
+						},
+						hover = {
+							textColor = Color3.fromHex("#D3CBA3"),
+							backgroundImage = {
+								tintColor = Color3.fromHex("#BA854A"),
+							},
+						},
+						focus = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							backgroundTransparency = 1,
+							boxShadow = 0,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#7A4A20"),
+							},
+						},
+						disabled = {
+							textColor = Color3.fromHex("#a4a29f"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								transparency = 0.3,
+							},
+						},
+					},
+				},
+			},
+		},
 		toast = {
 			intents = {
 				primary = {