@rbxts/react-clean-ui 1.0.12 → 1.0.19

package/out/Components/Layout/Tabs.luau

@@ -1,9 +1,6 @@
 -- 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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local HStack = TS.import(script, script.Parent, "HStack").HStack
 local VStack = TS.import(script, script.Parent, "VStack").VStack
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
@@ -20,11 +17,10 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
 local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
-local TabsContext = React.createContext(nil)
-local function Tab(props)
+local function Tab(_props)
 	return nil
 end
-local function TabTitle(props)
+local function TabTitle(_props)
 	return nil
 end
 local function TabContent(props)
@@ -60,32 +56,12 @@ local function TabButtonContent(props)
 		typography = TypographyHelper:getTypography(theme, nil, intent.typography),
 	}))
 end
-local Tabs
-do
-	local super = Component
-	Tabs = setmetatable({}, {
-		__tostring = function()
-			return "Tabs"
-		end,
-		__index = super,
-	})
-	Tabs.__index = Tabs
-	function Tabs.new(...)
-		local self = setmetatable({}, Tabs)
-		return self:constructor(...) or self
-	end
-	function Tabs:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			selected = 0,
-		}
-	end
-	function Tabs:render()
-		local context = {
-			selected = self.state.selected,
-		}
+local Tabs = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local selected, setSelected = React.useState(0)
+	local tabs = React.useMemo(function()
 		local tabs = {}
-		React.Children.forEach(self.props.children, function(child)
+		React.Children.forEach(props.children, function(child)
 			if not React.isValidElement(child) or child.type ~= Tab then
 				return nil
 			end
@@ -110,80 +86,85 @@ do
 				table.insert(tabs, _arg0)
 			end
 		end)
-		local selectedTab = tabs[self.state.selected + 1]
-		local _exp = React.createElement(Corners, {
-			radius = self.context.components.tabs.list.cornerRadius,
-		})
-		local _exp_1 = React.createElement(Padding, {
-			resolvedPadding = SpacingHelper:GetResolvedPadding(self.context, {}, self.context.components.tabs.list.spacing),
-		})
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue = table.create(#tabs)
-		local _callback = function(tab, index)
-			return React.createElement(HoverButton, {
-				isSelected = self.state.selected == index,
-				default = {
-					Size = UDim2.fromScale(0, 0),
-					AutomaticSize = Enum.AutomaticSize.XY,
-					ImageTransparency = 1,
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "default", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "default", self.context.components.tabs.button.intents).backgroundTransparency,
-					BorderSizePixel = 0,
-					AutoButtonColor = false,
-					Event = {
-						Activated = function()
-							self:setState({
-								selected = index,
-							})
-						end,
-					},
-				},
-				hover = {
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "hover", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "hover", self.context.components.tabs.button.intents).backgroundTransparency,
-				},
-				focus = {
-					BackgroundColor3 = ColorHelper:getIntentColors(self.context, "primary", "focus", self.context.components.tabs.button.intents).backgroundColor,
-					BackgroundTransparency = ColorHelper:getIntentColors(self.context, "primary", "focus", self.context.components.tabs.button.intents).backgroundTransparency,
-				},
-			}, React.createElement(TabButtonContent, {
-				text = tab.title.text,
-			}))
-		end
-		for _k, _v in tabs do
-			_newValue[_k] = _callback(_v, _k - 1, tabs)
+		return tabs
+	end, { props.children })
+	local tabCount = #tabs
+	React.useEffect(function()
+		if selected >= tabCount then
+			setSelected(math.max(0, tabCount - 1))
 		end
-		-- ▲ ReadonlyArray.map ▲
-		local _exp_2 = React.createElement(Container, {
-			BackgroundColor3 = self.context.components.tabs.list.backgroundColor,
-			width = "100%",
-			BackgroundTransparency = 0,
-		}, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
-		local _exp_3 = React.createElement("uistroke", {
-			Thickness = self.context.components.tabs.borderThickness,
-			BorderStrokePosition = Enum.BorderStrokePosition.Inner,
-			Color = self.context.components.tabs.borderColor,
-		})
-		local _exp_4 = React.createElement(Padding, {
-			resolvedPadding = SpacingHelper:GetResolvedPadding(self.context, {}, self.context.components.tabs.spacing),
-		})
-		local _exp_5 = React.createElement(Corners, {
-			radius = self.context.components.tabs.list.cornerRadius,
-		})
-		local _result = selectedTab
-		if _result ~= nil then
-			_result = _result.content
-		end
-		return React.createElement(TabsContext.Provider, {
-			value = context,
-		}, React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result)))
+	end, { selected, tabCount })
+	local selectedTab = tabs[selected + 1]
+	local buttonDefault = ColorHelper:getIntentColors(theme, "primary", "default", theme.components.tabs.button.intents)
+	local buttonHover = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.tabs.button.intents)
+	local buttonFocus = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.tabs.button.intents)
+	local _exp = React.createElement(Corners, {
+		radius = theme.components.tabs.list.cornerRadius,
+	})
+	local _exp_1 = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing),
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#tabs)
+	local _callback = function(tab, index)
+		return React.createElement(HoverButton, {
+			isSelected = selected == index,
+			default = {
+				Size = UDim2.fromScale(0, 0),
+				AutomaticSize = Enum.AutomaticSize.XY,
+				ImageTransparency = 1,
+				BackgroundColor3 = buttonDefault.backgroundColor,
+				BackgroundTransparency = buttonDefault.backgroundTransparency,
+				BorderSizePixel = 0,
+				AutoButtonColor = false,
+				Event = {
+					Activated = function()
+						setSelected(index)
+					end,
+				},
+			},
+			hover = {
+				BackgroundColor3 = buttonHover.backgroundColor,
+				BackgroundTransparency = buttonHover.backgroundTransparency,
+			},
+			focus = {
+				BackgroundColor3 = buttonFocus.backgroundColor,
+				BackgroundTransparency = buttonFocus.backgroundTransparency,
+			},
+		}, React.createElement(TabButtonContent, {
+			text = tab.title.text,
+		}))
 	end
-	Tabs.Tab = Tab
-	Tabs.Title = TabTitle
-	Tabs.Content = TabContent
-	Tabs.contextType = CleanThemeContext
-	Tabs = ReactComponent(Tabs) or Tabs
-end
+	for _k, _v in tabs do
+		_newValue[_k] = _callback(_v, _k - 1, tabs)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_2 = React.createElement(Container, {
+		ref = ref,
+		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
+		width = "100%",
+		BackgroundTransparency = 0,
+	}, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
+	local _exp_3 = React.createElement("uistroke", {
+		Thickness = theme.components.tabs.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = theme.components.tabs.borderColor,
+	})
+	local _exp_4 = React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing),
+	})
+	local _exp_5 = React.createElement(Corners, {
+		radius = theme.components.tabs.list.cornerRadius,
+	})
+	local _result = selectedTab
+	if _result ~= nil then
+		_result = _result.content
+	end
+	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, nil, _exp_3, _exp_4, _exp_5, _result))
+end)
+Tabs.Title = TabTitle
+Tabs.Tab = Tab
+Tabs.Content = TabContent
 return {
 	Tabs = Tabs,
 }

package/out/Components/Navigation/Menu.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { ButtonProps } from "../Input";
 interface MenuItemProps extends ButtonProps {
     title: string;
@@ -8,12 +8,8 @@ interface MenuProps {
     title: string;
     collapsed?: boolean;
 }
-interface MenuState {
-    collapsed: boolean;
-}
-export declare class Menu extends Component<MenuProps, MenuState> {
-    static Item: typeof MenuItem;
-    state: MenuState;
-    render(): React.ReactNode;
-}
-export {};
+type MenuComponent = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<Frame>> & {
+    Item: typeof MenuItem;
+};
+declare const Menu: MenuComponent;
+export { Menu };

package/out/Components/Navigation/Menu.luau

@@ -1,9 +1,6 @@
 -- 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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Button = TS.import(script, script.Parent.Parent, "Input").Button
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local Container = _Layout.Container
@@ -23,68 +20,44 @@ local function MenuItem(props)
 		group = true,
 	})
 end
-local Menu
-do
-	local super = Component
-	Menu = setmetatable({}, {
-		__tostring = function()
-			return "Menu"
-		end,
-		__index = super,
-	})
-	Menu.__index = Menu
-	function Menu.new(...)
-		local self = setmetatable({}, Menu)
-		return self:constructor(...) or self
-	end
-	function Menu:constructor(...)
-		super.constructor(self, ...)
-		local _object = {}
-		local _left = "collapsed"
-		local _condition = self.props.collapsed
-		if _condition == nil then
-			_condition = false
-		end
-		_object[_left] = _condition
-		self.state = _object
-	end
-	function Menu:render()
-		return React.createElement(NavigationContext.Provider, {
-			value = {
-				collapsed = self.state.collapsed,
-			},
-		}, React.createElement(Group, nil, React.createElement(VStack, {
-			spacing = "sm",
-		}, React.createElement(Container, {
-			group = true,
-		}, React.createElement(HStack, {
-			valign = "Center",
-		}, React.createElement(Button, {
-			icon = "bars",
-			Event = {
-				Activated = function()
-					self:setState(function(state)
-						return {
-							collapsed = not state.collapsed,
-						}
-					end)
-				end,
-			},
-		}), not self.state.collapsed and React.createElement(Text, {
-			text = self.props.title,
-			variant = "heading",
-		}))), React.createElement(FlexItem, {
-			mode = "Fill",
-		}, React.createElement(Scroller, {
-			height = "100%",
-		}, React.createElement(VStack, {
-			spacing = "sm",
-			HorizontalFlex = Enum.UIFlexAlignment.None,
-		}, self.props.children))))))
+local Menu = React.forwardRef(function(props, ref)
+	local _condition = props.collapsed
+	if _condition == nil then
+		_condition = false
 	end
-	Menu.Item = MenuItem
-	Menu = ReactComponent(Menu) or Menu
-end
+	local collapsed, setCollapsed = React.useState(_condition)
+	return React.createElement(NavigationContext.Provider, {
+		value = {
+			collapsed = collapsed,
+		},
+	}, React.createElement(Container, {
+		ref = ref,
+	}, React.createElement(Group, nil, React.createElement(VStack, {
+		spacing = "sm",
+	}, React.createElement(Container, {
+		group = true,
+	}, React.createElement(HStack, {
+		valign = "Center",
+	}, React.createElement(Button, {
+		icon = "bars",
+		Event = {
+			Activated = function()
+				setCollapsed(not collapsed)
+			end,
+		},
+	}), not collapsed and React.createElement(Text, {
+		text = props.title,
+		variant = "heading",
+	}))), React.createElement(FlexItem, {
+		mode = "Fill",
+	}, React.createElement(Scroller, {
+		height = "100%",
+	}, React.createElement(VStack, {
+		spacing = "sm",
+		HorizontalFlex = Enum.UIFlexAlignment.None,
+	}, props.children)))))))
+end)
+Menu.Item = MenuItem
 return {
 	MenuItem = MenuItem,
 	Menu = Menu,

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

@@ -1,6 +1,5 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { BoxProps } from "./Box";
-import { CleanThemeContext } from "../../Contexts";
 import { IntentElementProps } from "../../Interfaces";
 interface CardHeaderProps extends IntentElementProps {
     children?: React.ReactNode;
@@ -14,12 +13,10 @@ interface CardFooterProps extends BoxProps, IntentElementProps {
 export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
 interface CardProps extends BoxProps, IntentElementProps {
 }
-export declare class Card extends Component<CardProps> {
-    static Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<Frame>>;
-    static Footer: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
-    static Body: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<Frame>>;
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    render(): React.JSX.Element;
-}
-export {};
+type CardComponent = React.ForwardRefExoticComponent<CardProps & React.RefAttributes<Frame>> & {
+    Header: typeof CardHeader;
+    Footer: typeof CardFooter;
+    Body: typeof CardBody;
+};
+declare const Card: CardComponent;
+export { Card };

package/out/Components/Surface/Card.luau

@@ -1,9 +1,6 @@
 -- 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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Box = TS.import(script, script.Parent, "Box").Box
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local Container = _Layout.Container
@@ -28,8 +25,8 @@ local CardHeader = React.forwardRef(function(props, ref)
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.BackgroundTransparency = intent.backgroundTransparency
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
@@ -55,8 +52,8 @@ local CardBody = React.forwardRef(function(props, ref)
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_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,
 	}), props.children))
@@ -73,8 +70,8 @@ local CardFooter = React.forwardRef(function(props, ref)
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
-	_attributes.Size = UDim2.fromScale(1, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	_attributes.BackgroundTransparency = intent.backgroundTransparency
 	_attributes.BackgroundColor3 = intent.backgroundColor
 	_attributes.BorderSizePixel = 0
@@ -91,45 +88,28 @@ local CardFooter = React.forwardRef(function(props, ref)
 		BottomRightRadius = corners,
 	}), props.children)
 end)
-local Card
-do
-	local super = Component
-	Card = setmetatable({}, {
-		__tostring = function()
-			return "Card"
-		end,
-		__index = super,
-	})
-	Card.__index = Card
-	function Card.new(...)
-		local self = setmetatable({}, Card)
-		return self:constructor(...) or self
-	end
-	function Card:constructor(...)
-		super.constructor(self, ...)
-	end
-	function Card:render()
-		local contextValue = {
-			intent = self.props.intent,
+local Card = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local contextValue = React.useMemo(function()
+		return {
+			intent = props.intent,
 		}
-		local intent = ColorHelper:getIntentColors(self.context, self.props.intent or "primary", "default", self.context.components.card.header.intents)
-		local _attributes = table.clone(self.props)
-		setmetatable(_attributes, nil)
-		_attributes.ref = self.props.ref
-		_attributes.spacing = "None"
-		_attributes["border-color"] = intent.borderColor
-		return React.createElement(CardContext.Provider, {
-			value = contextValue,
-		}, React.createElement(Box, _attributes, React.createElement(VStack, {
-			spacing = "None",
-		}, self.props.children)))
-	end
-	Card.Header = CardHeader
-	Card.Footer = CardFooter
-	Card.Body = CardBody
-	Card.contextType = CleanThemeContext
-	Card = ReactComponent(Card) or Card
-end
+	end, { props.intent })
+	local intent = ColorHelper:getIntentColors(theme, props.intent or "primary", "default", theme.components.card.header.intents)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.ref = ref
+	_attributes.spacing = "None"
+	_attributes["border-color"] = intent.borderColor
+	return React.createElement(CardContext.Provider, {
+		value = contextValue,
+	}, React.createElement(Box, _attributes, React.createElement(VStack, {
+		spacing = "None",
+	}, props.children)))
+end)
+Card.Header = CardHeader
+Card.Footer = CardFooter
+Card.Body = CardBody
 return {
 	CardHeader = CardHeader,
 	CardBody = CardBody,

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

@@ -1,4 +1,3 @@
 export * from './Box';
 export * from './Card';
 export * from './Icon';
-export * from './Panel';

package/out/Components/Surface/init.luau

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

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/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

@@ -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 {

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;
@@ -188,6 +188,20 @@ export interface CleanTheme {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
         };
+        pie: {
+            colors: Color3[];
+            boxShadow?: CssBoxShadow;
+            hoverDarken: number;
+            labels: {
+                spacing?: ScaleSizeValue<number>;
+                backgroundColor?: Color3;
+                backgroundTransparency?: number;
+                typography?: Partial<TypographyStyle>;
+                borderColor?: Color3;
+                borderThickness?: number;
+                cornerRadius?: CssSize;
+            };
+        };
     };
     icons: Partial<IconSet>;
     iconSize: ScaleSizeValue<number>;