@rbxts/react-clean-ui 1.0.14 → 1.0.36

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/Components/index.d.ts

@@ -5,3 +5,4 @@ export * from './Input/';
 export * from './Typography/Text';
 export * from './Navigation/Menu';
 export * from './Interaction';
+export * from './Chart/';

package/out/Components/init.luau

@@ -22,4 +22,7 @@ end
 for _k, _v in TS.import(script, script, "Interaction") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Chart") or {} do
+	exports[_k] = _v
+end
 return exports

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/Helpers/css.helper.d.ts

@@ -1,4 +1,4 @@
-import { CssShadow, CssSize } from "../Interfaces/clean.element.props";
+import { CssBoxShadow, CssShadow, CssSize } from "../Interfaces/clean.element.props";
 interface ParsedShadow {
     offset: UDim2;
     blurRadius: UDim;
@@ -8,5 +8,6 @@ export declare class CssHelper {
     static parseCssShadow(value: CssShadow): ParsedShadow | undefined;
     private static isZero;
     static parseCssSize(value: CssSize): UDim;
+    static ResolveShadow(shadow: CssBoxShadow): React.InstanceProps<UIShadow>;
 }
 export {};

package/out/Helpers/css.helper.luau

@@ -108,6 +108,31 @@ do
 		end
 		return UDim.new(0, _condition)
 	end
+	function CssHelper:ResolveShadow(shadow)
+		local offset = self:parseCssShadow(shadow.shadow)
+		local _object = {}
+		local _left = "Offset"
+		local _result = offset
+		if _result ~= nil then
+			_result = _result.offset
+		end
+		_object[_left] = _result
+		local _left_1 = "BlurRadius"
+		local _result_1 = offset
+		if _result_1 ~= nil then
+			_result_1 = _result_1.blurRadius
+		end
+		_object[_left_1] = _result_1
+		local _left_2 = "Spread"
+		local _result_2 = offset
+		if _result_2 ~= nil then
+			_result_2 = _result_2.spread
+		end
+		_object[_left_2] = _result_2
+		_object.Color = shadow.color
+		_object.Transparency = shadow.transparency
+		return _object
+	end
 end
 return {
 	CssHelper = CssHelper,

package/out/Helpers/size.helper.luau

@@ -65,7 +65,7 @@ do
 		if props.width == "Auto" then
 			return Enum.AutomaticSize.X
 		end
-		local _condition = props.Size
+		local _condition = props.Size ~= nil
 		if not _condition then
 			local _condition_1 = props.width
 			if _condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1 then

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"];
@@ -47,6 +47,11 @@ export type CssBreakpointSize = {
 };
 export type CssQuad = CssSize | `${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize} ${CssSize}`;
 export type CssShadow = CssQuad;
+export type CssBoxShadow = {
+    shadow: CssShadow;
+    color: Color3;
+    transparency: number;
+};
 export type CssPadding = CssQuad;
 export type ResponsiveCssSize = CssSize | CssBreakpointSize;
 export interface ZIndexElementProps {
@@ -68,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/Providers/registry.provider.d.ts

@@ -20,6 +20,7 @@ export interface RegistryContextValue {
     unregister: <T extends defined>(guiObject: GuiObject, key: RegistryKey<T>) => void;
     get: <T extends defined>(guiObject: GuiObject, key: RegistryKey<T>) => T | undefined;
     getAll: <T extends defined>(key: RegistryKey<T>) => T[];
+    GetNextId: () => string;
 }
 export declare const RegistryContext: React.Context<RegistryContextValue | undefined>;
 export interface RegistryProviderProps {

package/out/Providers/registry.provider.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 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 = {
@@ -72,11 +73,15 @@ local function RegistryProvider(props)
 		end
 		return result
 	end
+	local GetNextId = function()
+		return HttpService:GenerateGUID(false)
+	end
 	local contextValue = {
 		register = register,
 		unregister = unregister,
 		get = get,
 		getAll = getAll,
+		GetNextId = GetNextId,
 	}
 	return React.createElement(RegistryContext.Provider, {
 		value = contextValue,

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

@@ -1,4 +1,4 @@
-import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag, PositionElementProps } from "../Interfaces/";
+import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag, PositionElementProps, CssBoxShadow } from "../Interfaces/";
 export interface TypographyStyle {
     font: Enum.Font;
     size: Enum.FontSize;
@@ -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,6 +209,56 @@ export interface CleanTheme {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
         };
+        charts: {
+            colors: Color3[];
+            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>;
+                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;
+                };
+            };
+        };
     };
     icons: Partial<IconSet>;
     iconSize: ScaleSizeValue<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,6 +365,24 @@ local DarkTheme = createTheme({
 			header = {},
 			body = {},
 		},
+		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 = {
 		["shopping-cart"] = 112388431913339,

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,6 +526,63 @@ local DefaultTheme = {
 				},
 			},
 		},
+		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 = {
+				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,
+				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,
+				},
+			},
+		},
 	},
 	icons = {
 		["shopping-cart"] = 112388431913339,

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,6 +365,36 @@ local SandstoneTheme = createTheme({
 			header = {},
 			body = {},
 		},
+		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") },
+			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"),
+				},
+			},
+		},
 	},
 	icons = {
 		["shopping-cart"] = 112388431913339,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.0.14",
+  "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",

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

@@ -1,4 +0,0 @@
-import React, { Component } from "@rbxts/react";
-export declare class Panel extends Component {
-    render(): React.ReactNode;
-}

package/out/Components/Surface/Panel.luau

@@ -1,33 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
-local Box = TS.import(script, script.Parent, "Box").Box
-local VStack = TS.import(script, script.Parent.Parent, "Layout", "VStack").VStack
-local Panel
-do
-	local super = Component
-	Panel = setmetatable({}, {
-		__tostring = function()
-			return "Panel"
-		end,
-		__index = super,
-	})
-	Panel.__index = Panel
-	function Panel.new(...)
-		local self = setmetatable({}, Panel)
-		return self:constructor(...) or self
-	end
-	function Panel:constructor(...)
-		super.constructor(self, ...)
-	end
-	function Panel:render()
-		return React.createElement(Box, nil, React.createElement(VStack))
-	end
-	Panel = ReactComponent(Panel) or Panel
-end
-return {
-	Panel = Panel,
-}