@rbxts/react-clean-ui 1.0.19 → 1.0.36

package/out/Components/Layout/HStack.luau

@@ -5,12 +5,11 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function HStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2))
 	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalFlex = props.HorizontalFlex,
 		VerticalAlignment = props.valign,
-		Padding = padding,
+		Padding = props.Padding or UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2)),
 		Wraps = if props.Wraps == nil then true else props.Wraps,
 		Change = props.Change,
 		Event = props.Event,

package/out/Components/Layout/VStack.d.ts

@@ -1,11 +1,14 @@
-import React from "@rbxts/react";
+import React, { Binding } from "@rbxts/react";
 import { SpacedElementProps } from "../../Interfaces";
 interface VStackProps extends SpacedElementProps {
+    valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
     children?: React.ReactNode;
     HorizontalFlex?: Enum.UIFlexAlignment;
     VerticalFlex?: Enum.UIFlexAlignment;
+    VerticalAlignment?: Enum.VerticalAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
+    Padding?: UDim | Binding<UDim>;
 }
 export declare function VStack(props: VStackProps): React.JSX.Element;
 export {};

package/out/Components/Layout/VStack.luau

@@ -5,12 +5,12 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function VStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
 	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Vertical,
 		HorizontalFlex = props.HorizontalFlex or Enum.UIFlexAlignment.Fill,
 		VerticalFlex = props.VerticalFlex,
-		Padding = padding,
+		VerticalAlignment = props.VerticalAlignment or props.valign,
+		Padding = props.Padding or UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing)),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 		Change = props.Change,
 		Event = props.Event,

package/out/Components/Layout/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Column';
+export * from './Accordion';
 export * from './Container';
 export * from './Draggable';
 export * from './Droppable';

package/out/Components/Layout/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "Column") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Accordion") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Container") or {} do
 	exports[_k] = _v
 end

package/out/Components/Surface/Box.d.ts

@@ -1,6 +1,6 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
-export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, React.InstanceProps<Frame> {
+import { BackgroundElementProps, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, PositionElementProps, React.InstanceProps<Frame> {
     'border-thickness'?: number;
     'border-color'?: Color3;
 }

package/out/Components/Surface/Card.luau

@@ -9,6 +9,7 @@ local VStack = _Layout.VStack
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local CssHelper = _Helpers.CssHelper
+local SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local Padding = TS.import(script, script.Parent.Parent, "Decorator").Padding
@@ -48,11 +49,11 @@ local CardBody = React.forwardRef(function(props, ref)
 	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.header.spacing))
 	local _attributes = {
 		ref = ref,
+		Size = SizeHelper:GetSize(props, UDim2.fromScale(0, 0)),
 	}
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	return React.createElement(FlexItem, nil, React.createElement(Container, _attributes, React.createElement(Padding, {
 		resolvedPadding = padding,
@@ -99,13 +100,24 @@ local Card = React.forwardRef(function(props, ref)
 	local _attributes = table.clone(props)
 	setmetatable(_attributes, nil)
 	_attributes.ref = ref
+	_attributes.center = nil
 	_attributes.spacing = "None"
 	_attributes["border-color"] = intent.borderColor
-	return React.createElement(CardContext.Provider, {
-		value = contextValue,
-	}, React.createElement(Box, _attributes, React.createElement(VStack, {
+	local cardBox = (React.createElement(Box, _attributes, React.createElement(VStack, {
 		spacing = "None",
 	}, props.children)))
+	local isCentered = props.center == true and props.Position == nil and props.AnchorPoint == nil
+	return React.createElement(CardContext.Provider, {
+		value = contextValue,
+	}, if isCentered then (React.createElement(Container, {
+		Size = UDim2.fromScale(1, 1),
+		ZIndex = props.ZIndex,
+		LayoutOrder = props.LayoutOrder,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+	}), cardBox)) else cardBox)
 end)
 Card.Header = CardHeader
 Card.Footer = CardFooter

package/out/Components/Surface/Icon.d.ts

@@ -1,6 +1,6 @@
 import React, { Binding } from "@rbxts/react";
 import { IconElementProps, ScalableElementProps } from "../../Interfaces/";
-export interface IconProps extends IconElementProps, ScalableElementProps {
+export interface IconProps extends IconElementProps, ScalableElementProps, React.InstanceProps<ImageLabel> {
     color?: Color3;
     Size?: UDim2;
     spinning?: boolean;

package/out/Components/Surface/Icon.luau

@@ -54,6 +54,7 @@ function Icon(props)
 	return React.createElement("imagelabel", {
 		Rotation = props.Rotation,
 		Size = props.Size or UDim2.fromOffset(size, size),
+		LayoutOrder = props.LayoutOrder,
 		Image = if iconId == nil then nil else `rbxassetid://{iconId}`,
 		BackgroundTransparency = 1,
 		ImageColor3 = props.color or theme.colors.intents.primary.default.textColor,

package/out/Components/Typography/Text.luau

@@ -6,22 +6,35 @@ local Text = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
 	local style = props.typography or theme.typography[props.variant or "body"]
 	local weight = if props.weight == "bold" then Enum.FontWeight.Bold else props.weight or style.weight or Enum.FontWeight.Regular
-	return React.createElement("textlabel", {
+	local textwrapped = props.TextWrap ~= false and props.TextWrapped ~= false
+	local _attributes = {
 		ref = ref,
 		Size = UDim2.fromScale(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
-		LineHeight = style.lineHeight,
-		BackgroundTransparency = 1,
-		TextXAlignment = props.align or (props.TextXAlignment or Enum.TextXAlignment.Left),
-		TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor,
-		Text = props.text,
-		TextWrap = props.TextWrap == nil or props.TextWrap == true,
-		FontFace = Font.fromName(style.font.Name, weight),
-		FontSize = style.size,
-		RichText = true,
-		Event = props.Event,
-		TextScaled = false,
-	}, props.children)
+		AnchorPoint = props.AnchorPoint,
+	}
+	local _condition = props.LineHeight
+	if _condition == nil then
+		_condition = style.lineHeight
+	end
+	_attributes.LineHeight = _condition
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.TextXAlignment = props.align or (props.TextXAlignment or Enum.TextXAlignment.Left)
+	_attributes.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
+	_attributes.Text = props.text
+	_attributes.Position = props.Position
+	_attributes.TextWrap = textwrapped
+	_attributes.TextWrapped = textwrapped
+	_attributes.FontFace = Font.fromName(style.font.Name, weight)
+	_attributes.FontSize = style.size
+	_attributes.RichText = true
+	_attributes.Event = props.Event
+	_attributes.TextScaled = false
+	return React.createElement("textlabel", _attributes, props.children)
 end)
 return {
 	Text = Text,

package/out/Helpers/create-ui-story.d.ts

@@ -4,13 +4,15 @@ import { InferProps } from "@rbxts/ui-labs";
 declare const controls: {
     Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone">;
 };
-type StoryProps = InferProps<typeof controls>;
-export declare function createStory(StoryComponent: (props: StoryProps) => React.ReactNode): {
+type StoryControl = Parameters<typeof import("@rbxts/ui-labs").Ordered>[0];
+type StoryControls = Record<string, StoryControl>;
+type StoryProps<T extends StoryControls> = InferProps<typeof controls & T>;
+export declare function createStory<T extends StoryControls = {}>(StoryComponent: (props: StoryProps<T>) => React.ReactNode, additionalControls?: T): {
     react: typeof React;
     reactRoblox: typeof ReactRoblox;
     controls: {
         Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone">;
-    };
-    story: (props: StoryProps) => React.JSX.Element;
+    } & T;
+    story: (props: StoryProps<T>) => React.JSX.Element;
 };
 export {};

package/out/Helpers/create-ui-story.luau

@@ -11,17 +11,28 @@ local CleanUiProvider = TS.import(script, script.Parent.Parent, "Providers", "ap
 local controls = {
 	Theme = Choose({ "Default", "Dark", "Sandstone" }),
 }
-local function createStory(StoryComponent)
+local function createStory(StoryComponent, additionalControls)
+	local _object = {}
+	if additionalControls then
+		for _k, _v in additionalControls do
+			_object[_k] = _v
+		end
+	end
+	for _k, _v in controls do
+		_object[_k] = _v
+	end
+	local storyControls = _object
 	return {
 		react = React,
 		reactRoblox = ReactRoblox,
-		controls = controls,
+		controls = storyControls,
 		story = function(props)
+			local baseProps = props
 			local theme = DefaultTheme
-			if props.controls.Theme == "Dark" then
+			if baseProps.controls.Theme == "Dark" then
 				theme = DarkTheme
 			end
-			if props.controls.Theme == "Sandstone" then
+			if baseProps.controls.Theme == "Sandstone" then
 				theme = SandstoneTheme
 			end
 			local _attributes = table.clone(props)

package/out/Interfaces/clean.element.props.d.ts

@@ -1,6 +1,6 @@
 import { Binding } from "@rbxts/react";
 import { IconName } from "./icon";
-export type ButtonFlag = "default" | "hover" | "focus";
+export type ButtonFlag = "default" | "hover" | "focus" | "disabled";
 export type CssUnit = "px" | "%";
 export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
 export declare const ScaleSizes: readonly ["xs", "sm", "md", "lg", "xl"];
@@ -73,7 +73,7 @@ export interface ScalableElementProps {
 export interface PositionElementProps {
     Position?: UDim2 | Binding<UDim2>;
     AnchorPoint?: Vector2 | Binding<Vector2> | undefined;
-    center?: CssSize | boolean;
+    center?: boolean;
     top?: CssSize;
     left?: CssSize;
     right?: CssSize;

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

@@ -125,6 +125,27 @@ export interface CleanTheme {
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
             };
         };
+        accordion: {
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            spacing?: ScaleSizeValue<number>;
+            header: {
+                spacing?: ScaleSizeValue<number>;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+                indicatorSize: number;
+                indicatorColor: Color3;
+            };
+            content: {
+                spacing?: ScaleSizeValue<number>;
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+            };
+            animation: {
+                duration: number;
+            };
+        };
         card: {
             borderThickness: number;
             cornerRadius: CssSize;
@@ -188,18 +209,54 @@ export interface CleanTheme {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
         };
-        pie: {
+        charts: {
             colors: Color3[];
-            boxShadow?: CssBoxShadow;
-            hoverDarken: number;
-            labels: {
+            pie: {
+                boxShadow?: CssBoxShadow;
+                hoverDarken: number;
+                labels: {
+                    spacing?: ScaleSizeValue<number>;
+                    backgroundColor?: Color3;
+                    backgroundTransparency?: number;
+                    typography?: Partial<TypographyStyle>;
+                    borderColor?: Color3;
+                    borderThickness?: number;
+                    cornerRadius?: CssSize;
+                };
+            };
+            bar: {
                 spacing?: ScaleSizeValue<number>;
-                backgroundColor?: Color3;
-                backgroundTransparency?: number;
-                typography?: Partial<TypographyStyle>;
-                borderColor?: Color3;
-                borderThickness?: number;
-                cornerRadius?: CssSize;
+                unstackedTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                tweenTime: number;
+                axis: {
+                    color: Color3;
+                    transparency: number;
+                    thickness: number;
+                };
+                xAxis: {
+                    size: number;
+                    spacing: number;
+                    tickColor: Color3;
+                    tickTransparency: number;
+                    tickThickness: number;
+                    tickSize: number;
+                };
+                yAxis: {
+                    size: number;
+                    spacing: number;
+                    tickColor: Color3;
+                    tickTransparency: number;
+                    tickThickness: number;
+                    tickSize: number;
+                };
+                gridLines: {
+                    color: Color3;
+                    transparency: number;
+                    thickness: number;
+                };
             };
         };
     };

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

@@ -273,6 +273,35 @@ local DarkTheme = createTheme({
 				},
 			},
 		},
+		accordion = {
+			borderColor = Color3.fromHex("#4B5568"),
+			header = {
+				indicatorColor = Color3.fromHex("#C9CDD5"),
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#252B36"),
+							textColor = Color3.fromHex("#E8EDF8"),
+						},
+						hover = {
+							backgroundColor = Color3.fromHex("#303949"),
+							textColor = Color3.fromHex("#FFFFFF"),
+						},
+						focus = {
+							backgroundColor = Color3.fromHex("#3A414D"),
+							textColor = Color3.fromHex("#FFFFFF"),
+						},
+						disabled = {
+							backgroundColor = Color3.fromHex("#1D222B"),
+							textColor = Color3.fromHex("#697386"),
+						},
+					},
+				},
+			},
+			content = {
+				backgroundColor = Color3.fromHex("#171B22"),
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#2A303B"),
@@ -336,8 +365,23 @@ local DarkTheme = createTheme({
 			header = {},
 			body = {},
 		},
-		pie = {
+		charts = {
 			colors = { Color3.fromHex("#4CC47A"), Color3.fromHex("#E35B5B"), Color3.fromHex("#F0B74A"), Color3.fromHex("#4D9EEA"), Color3.fromHex("#A676F0"), Color3.fromHex("#43C2BA"), Color3.fromHex("#F48A52"), Color3.fromHex("#E06AAE"), Color3.fromHex("#6FA8DC"), Color3.fromHex("#9CCC4A") },
+			bar = {
+				borderColor = Color3.fromHex("#111827"),
+				axis = {
+					color = Color3.fromHex("#AAB4C3"),
+				},
+				xAxis = {
+					tickColor = Color3.fromHex("#AAB4C3"),
+				},
+				yAxis = {
+					tickColor = Color3.fromHex("#AAB4C3"),
+				},
+				gridLines = {
+					color = Color3.fromHex("#6B7688"),
+				},
+			},
 		},
 	},
 	icons = {

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

@@ -1,5 +1,5 @@
 -- Compiled with roblox-ts v3.0.0
-local font = Enum.Font.Gotham
+local font = Enum.Font.Roboto
 local DefaultTheme = {
 	colors = {
 		intents = {
@@ -269,6 +269,64 @@ local DefaultTheme = {
 				},
 			},
 		},
+		accordion = {
+			borderColor = Color3.fromHex("#D9DEE8"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			spacing = {
+				xs = 0,
+				sm = 0,
+				md = 0,
+				lg = 0,
+				xl = 0,
+			},
+			header = {
+				spacing = {
+					xs = 4,
+					sm = 8,
+					md = 12,
+					lg = 16,
+					xl = 24,
+				},
+				indicatorSize = 14,
+				indicatorColor = Color3.fromHex("#4F4F4F"),
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#F2F4F8"),
+							textColor = Color3.fromHex("#1D2433"),
+						},
+						hover = {
+							backgroundColor = Color3.fromHex("#E7EBF2"),
+							textColor = Color3.fromHex("#000000"),
+						},
+						focus = {
+							backgroundColor = Color3.fromHex("#E1E3E7"),
+							textColor = Color3.fromHex("#000000"),
+						},
+						disabled = {
+							backgroundColor = Color3.fromHex("#F5F5F5"),
+							backgroundTransparency = 0.35,
+							textColor = Color3.fromHex("#8A8A8A"),
+						},
+					},
+				},
+			},
+			content = {
+				spacing = {
+					xs = 4,
+					sm = 8,
+					md = 12,
+					lg = 16,
+					xl = 24,
+				},
+				backgroundColor = Color3.fromHex("#FFFFFF"),
+				backgroundTransparency = 0,
+			},
+			animation = {
+				duration = 0.2,
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#D9DEE8"),
@@ -468,18 +526,60 @@ local DefaultTheme = {
 				},
 			},
 		},
-		pie = {
-			hoverDarken = 0.2,
-			boxShadow = {
-				shadow = "0px 0px 8px 3px",
-				color = Color3.fromHex("#000000"),
-				transparency = 0.6,
-			},
+		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") },
-			labels = {
+			pie = {
+				hoverDarken = 0.2,
+				boxShadow = {
+					shadow = "0px 0px 8px 3px",
+					color = Color3.fromHex("#000000"),
+					transparency = 0.6,
+				},
+				labels = {
+					cornerRadius = 4,
+					typography = {
+						weight = Enum.FontWeight.Bold,
+					},
+				},
+			},
+			bar = {
+				spacing = {
+					xs = 4,
+					sm = 8,
+					md = 12,
+					lg = 16,
+					xl = 20,
+				},
+				unstackedTransparency = 0,
+				borderColor = Color3.fromHex("#3A4352"),
+				borderThickness = 1,
 				cornerRadius = 4,
-				typography = {
-					weight = Enum.FontWeight.Bold,
+				tweenTime = 0.5,
+				axis = {
+					color = Color3.fromHex("#3A4352"),
+					transparency = 0.5,
+					thickness = 2,
+				},
+				xAxis = {
+					size = 50,
+					spacing = 4,
+					tickColor = Color3.fromHex("#3A4352"),
+					tickTransparency = 0.5,
+					tickThickness = 2,
+					tickSize = 10,
+				},
+				yAxis = {
+					size = 50,
+					spacing = 4,
+					tickColor = Color3.fromHex("#3A4352"),
+					tickTransparency = 0.5,
+					tickThickness = 2,
+					tickSize = 10,
+				},
+				gridLines = {
+					color = Color3.fromHex("#6B7C93"),
+					transparency = 0.8,
+					thickness = 2,
 				},
 			},
 		},

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

@@ -273,6 +273,35 @@ local SandstoneTheme = createTheme({
 				},
 			},
 		},
+		accordion = {
+			borderColor = Color3.fromHex("#B9A98F"),
+			header = {
+				indicatorColor = Color3.fromHex("#496E68"),
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#EFE5D3"),
+							textColor = Color3.fromHex("#4A4034"),
+						},
+						hover = {
+							backgroundColor = Color3.fromHex("#DFE8DC"),
+							textColor = Color3.fromHex("#244F4A"),
+						},
+						focus = {
+							backgroundColor = Color3.fromHex("#CFE1DC"),
+							textColor = Color3.fromHex("#183B37"),
+						},
+						disabled = {
+							backgroundColor = Color3.fromHex("#E8DFCF"),
+							textColor = Color3.fromHex("#9B8B73"),
+						},
+					},
+				},
+			},
+			content = {
+				backgroundColor = Color3.fromHex("#FFF9ED"),
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#EFE5D3"),
@@ -336,17 +365,34 @@ local SandstoneTheme = createTheme({
 			header = {},
 			body = {},
 		},
-		pie = {
-			boxShadow = {
-				shadow = "0px 0px",
-				color = Color3.fromHex("#FFFFFF"),
-				transparency = 1,
-			},
+		charts = {
 			colors = { Color3.fromHex("#7A9E7E"), Color3.fromHex("#A66C5D"), Color3.fromHex("#B89A5A"), Color3.fromHex("#6E97A8"), Color3.fromHex("#8A729E"), Color3.fromHex("#6F9A90"), Color3.fromHex("#C97A4A"), Color3.fromHex("#C58A9A"), Color3.fromHex("#8F7B5E"), Color3.fromHex("#8C9B5E") },
-			labels = {
-				backgroundColor = Color3.fromHex("#FFF9ED"),
-				backgroundTransparency = 0,
-				borderColor = Color3.fromHex("#D8CDBA"),
+			pie = {
+				boxShadow = {
+					shadow = "0px 0px",
+					color = Color3.fromHex("#FFFFFF"),
+					transparency = 1,
+				},
+				labels = {
+					backgroundColor = Color3.fromHex("#FFF9ED"),
+					backgroundTransparency = 0,
+					borderColor = Color3.fromHex("#D8CDBA"),
+				},
+			},
+			bar = {
+				borderColor = Color3.fromHex("#5F5547"),
+				axis = {
+					color = Color3.fromHex("#5F5547"),
+				},
+				xAxis = {
+					tickColor = Color3.fromHex("#786B59"),
+				},
+				yAxis = {
+					tickColor = Color3.fromHex("#786B59"),
+				},
+				gridLines = {
+					color = Color3.fromHex("#8F7B5E"),
+				},
 			},
 		},
 	},

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.0.19",
+  "version": "1.0.36",
   "description": "",
   "main": "out/init.lua",
   "scripts": {
     "build": "rbxtsc",
     "watch": "rbxtsc -w",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "screenshots": "node scripts/generate-screenshots.js"
   },
   "keywords": [],
   "author": "",
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@rbxts/compiler-types": "^3.0.0-types.0",
+    "@rbxts/react-screenshot-plugin": "^0.1.6",
     "@rbxts/types": "^1.0.938",
     "@typescript-eslint/eslint-plugin": "^8.63.0",
     "@typescript-eslint/parser": "^8.63.0",