@rbxts/uiblox 0.1.30 → 0.1.32

package/out/theme/types/types.d.ts

@@ -3,6 +3,7 @@ import { WriteableStyle } from "../interfaces/index";
 export interface CommonProps<T extends Instance> extends PropsWithChildren {
     className?: WriteableStyle<T>;
     component?: T;
+    key?: string;
 }
 export type BaseDefaultProps<T extends Instance, P> = CommonProps<T> & P;
 export type BaseCustomizedProps<T extends Instance, P> = BaseDefaultProps<T, P>;

package/out/ui/index.d.ts

@@ -14,6 +14,10 @@ export { InputProps } from "./packages/index";
 export { InputColor } from "./packages/index";
 export { InputMargin } from "./packages/index";
 export { InputVariant } from "./packages/index";
+export { Grid } from "./packages/index";
+export { GridProps } from "./packages/index";
+export { List } from "./packages/index";
+export { ListProps } from "./packages/index";
 export { Preloader } from "./packages/index";
 export { PreloaderProps } from "./packages/index";
 export { PreloaderAssets as Assets } from "./packages/index";

package/out/ui/init.luau

@@ -12,6 +12,8 @@ exports.ErrorBoundary = TS.import(script, script, "packages").ErrorBoundary
 exports.Icon = TS.import(script, script, "packages").Icon
 exports.IconButton = TS.import(script, script, "packages").IconButton
 exports.Input = TS.import(script, script, "packages").Input
+exports.Grid = TS.import(script, script, "packages").Grid
+exports.List = TS.import(script, script, "packages").List
 exports.Preloader = TS.import(script, script, "packages").Preloader
 exports.ProgressBar = TS.import(script, script, "packages").ProgressBar
 exports.Shadow = TS.import(script, script, "packages").Shadow

package/out/ui/packages/button/components/Button.luau

@@ -40,15 +40,19 @@ local function Button(props)
 	local mouseLeave = _binding.mouseLeave
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local _binding_1 = useButtonStyles(props)
 	local root = _binding_1.root
 	local font = _binding_1.font
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
 	local hovering, setHovering = useState(false)
-	local _attributes = {
-		key = "Button",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Button"
+	end
+	_attributes.key = _condition
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end
@@ -65,11 +69,11 @@ local function Button(props)
 		if _result_1 ~= nil then
 			_result_1 = _result_1.BackgroundTransparency
 		end
-		local _condition = _result_1
-		if _condition == nil then
-			_condition = (if variant == "outlined" or variant == "text" then 1 else 0)
+		local _condition_1 = _result_1
+		if _condition_1 == nil then
+			_condition_1 = (if variant == "outlined" or variant == "text" then 1 else 0)
 		end
-		_result = _condition
+		_result = _condition_1
 	end
 	_attributes.BackgroundTransparency = _result
 	_attributes.Event = {
@@ -133,19 +137,19 @@ local function Button(props)
 			_attributes[_k] = _v
 		end
 	end
-	local _condition = variant == "outlined"
-	if _condition then
+	local _condition_1 = variant == "outlined"
+	if _condition_1 then
 		local _attributes_1 = table.clone(stroke)
 		setmetatable(_attributes_1, nil)
-		_condition = React.createElement("uistroke", _attributes_1)
+		_condition_1 = React.createElement("uistroke", _attributes_1)
 	end
-	local _condition_1 = rounded
-	if _condition_1 then
+	local _condition_2 = rounded
+	if _condition_2 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
-		_condition_1 = React.createElement("uicorner", _attributes_1)
+		_condition_2 = React.createElement("uicorner", _attributes_1)
 	end
-	return React.createElement("textbutton", _attributes, _condition, _condition_1, children)
+	return React.createElement("textbutton", _attributes, _condition_1, _condition_2, children)
 end
 local default = Button
 return {

package/out/ui/packages/divider/components/Divider.luau

@@ -5,11 +5,15 @@ local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").defa
 local function Divider(props)
 	local _binding = props
 	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
-	local _attributes = {
-		key = "Divider",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Divider"
+	end
+	_attributes.key = _condition
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/icon/components/Icon.luau

@@ -7,11 +7,15 @@ local function Icon(props)
 	local icon = _binding.icon
 	local tint = _binding.tint
 	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = {
-		key = "Icon",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Icon"
+	end
+	_attributes.key = _condition
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -11,12 +11,16 @@ local function IconButton(props)
 	local tint = _binding.tint
 	local onClick = _binding.onClick
 	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
 	local hovering, setHovering = useState(false)
-	local _attributes = {
-		key = "IconButton",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "IconButton"
+	end
+	_attributes.key = _condition
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/index.d.ts

@@ -3,6 +3,7 @@ export * from "./errorBoundary/index";
 export * from "./icon/index";
 export * from "./iconButton/index";
 export * from "./input/index";
+export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./shadow/index";

package/out/ui/packages/init.luau

@@ -16,6 +16,9 @@ end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "layout") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "preloader") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/input/components/Input.luau

@@ -33,6 +33,7 @@ local function Input(props)
 	local onBlur = _binding.onBlur
 	local onEnterPressed = _binding.onEnterPressed
 	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useInputStyles(props)
 	local root = _binding_1.root
 	local font = _binding_1.font
@@ -49,9 +50,12 @@ local function Input(props)
 		_condition = ""
 	end
 	local input, setInput = useState(_condition)
-	local _attributes = {
-		key = "Input",
-	}
+	local _attributes = {}
+	local _condition_1 = key
+	if not (_condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Input"
+	end
+	_attributes.key = _condition_1
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end
@@ -101,19 +105,19 @@ local function Input(props)
 			end
 		end,
 	}
-	local _condition_1 = variant == "outlined"
-	if _condition_1 then
+	local _condition_2 = variant == "outlined"
+	if _condition_2 then
 		local _attributes_3 = table.clone(stroke)
 		setmetatable(_attributes_3, nil)
-		_condition_1 = React.createElement("uistroke", _attributes_3)
+		_condition_2 = React.createElement("uistroke", _attributes_3)
 	end
-	local _condition_2 = rounded
-	if _condition_2 then
+	local _condition_3 = rounded
+	if _condition_3 then
 		local _attributes_3 = table.clone(corner)
 		setmetatable(_attributes_3, nil)
-		_condition_2 = React.createElement("uicorner", _attributes_3)
+		_condition_3 = React.createElement("uicorner", _attributes_3)
 	end
-	local _exp = React.createElement("textbox", _attributes_2, _condition_1, _condition_2)
+	local _exp = React.createElement("textbox", _attributes_2, _condition_2, _condition_3)
 	local _exp_1 = React.createElement(Divider, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
@@ -122,8 +126,8 @@ local function Input(props)
 			[divider] = true,
 		}),
 	})
-	local _condition_3 = helperText ~= nil
-	if _condition_3 then
+	local _condition_4 = helperText ~= nil
+	if _condition_4 then
 		local _attributes_3 = {
 			key = "HelperText",
 		}
@@ -139,9 +143,9 @@ local function Input(props)
 			_attributes_3[_k] = _v
 		end
 		_attributes_3.Text = helperText
-		_condition_3 = (React.createElement("textlabel", _attributes_3))
+		_condition_4 = (React.createElement("textlabel", _attributes_3))
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_3))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_4))
 end
 local default = Input
 return {

package/out/ui/packages/layout/components/Grid.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface GridProps {
+    cellPadding?: UDim;
+    cellSize?: UDim2;
+    fillDirection?: Enum.FillDirection;
+    fillDirectionMaxCells?: number;
+    sortOrder?: Enum.SortOrder;
+    startCorner: Enum.StartCorner;
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+}
+declare function Grid(props: CustomizedProps<Frame, GridProps>): JSX.Element;
+export default Grid;

package/out/ui/packages/layout/components/Grid.luau

@@ -0,0 +1,97 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useGridStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseGrid = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			CellPadding = props.cellPadding,
+			CellSize = props.cellSize,
+			FillDirection = props.fillDirection,
+			FillDirectionMaxCells = props.fillDirectionMaxCells,
+			SortOrder = props.sortOrder,
+			StartCorner = props.startCorner,
+			HorizontalAlignment = props.horizontalAlignment,
+			VerticalAlignment = props.veritcalAlignment,
+		},
+	})
+end)
+local function Grid(props)
+	local _binding = props
+	local cellPadding = _binding.cellPadding
+	if cellPadding == nil then
+		cellPadding = UDim.new(0, 0)
+	end
+	local cellSize = _binding.cellSize
+	if cellSize == nil then
+		cellSize = UDim2.fromOffset(100, 100)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local fillDirectionMaxCells = _binding.fillDirectionMaxCells
+	if fillDirectionMaxCells == nil then
+		fillDirectionMaxCells = 0
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local startCorner = _binding.startCorner
+	if startCorner == nil then
+		startCorner = Enum.StartCorner.TopLeft
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local key = _binding.key
+	local _binding_1 = useGridStyles({
+		cellPadding = cellPadding,
+		cellSize = cellSize,
+		fillDirection = fillDirection,
+		fillDirectionMaxCells = fillDirectionMaxCells,
+		sortOrder = sortOrder,
+		startCorner = startCorner,
+		horizontalAlignment = horizontalAlignment,
+		veritcalAlignment = veritcalAlignment,
+	})
+	local baseGrid = _binding_1.baseGrid
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Grid"
+	end
+	_attributes.key = _condition
+	for _k, _v in baseGrid do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uigridlayout", _attributes_1), children)
+end
+local default = Grid
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/List.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ListProps {
+    padding?: UDim;
+    fillDirection?: Enum.FillDirection;
+    sortOrder?: Enum.SortOrder;
+    wrap?: "wrap" | "no-wrap";
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    horizontalFlex?: Enum.UIFlexAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+    verticalFlex?: Enum.UIFlexAlignment;
+}
+declare function List(props: CustomizedProps<Frame, ListProps>): JSX.Element;
+export default List;

package/out/ui/packages/layout/components/List.luau

@@ -0,0 +1,97 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useListStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseList = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			Padding = props.padding,
+			FillDirection = props.fillDirection,
+			SortOrder = props.sortOrder,
+			Wraps = props.wrap == "wrap",
+			HorizontalAlignment = props.horizontalAlignment,
+			HorizontalFlex = props.horizontalFlex,
+			VerticalAlignment = props.veritcalAlignment,
+			VerticalFlex = props.verticalFlex,
+		},
+	})
+end)
+local function List(props)
+	local _binding = props
+	local padding = _binding.padding
+	if padding == nil then
+		padding = UDim.new(0, 0)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local wrap = _binding.wrap
+	if wrap == nil then
+		wrap = "wrap"
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local horizontalFlex = _binding.horizontalFlex
+	if horizontalFlex == nil then
+		horizontalFlex = Enum.UIFlexAlignment.None
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local verticalFlex = _binding.verticalFlex
+	if verticalFlex == nil then
+		verticalFlex = Enum.UIFlexAlignment.None
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local key = _binding.key
+	local _binding_1 = useListStyles({
+		padding = padding,
+		fillDirection = fillDirection,
+		sortOrder = sortOrder,
+		wrap = wrap,
+		horizontalAlignment = horizontalAlignment,
+		horizontalFlex = horizontalFlex,
+		veritcalAlignment = veritcalAlignment,
+		verticalFlex = verticalFlex,
+	})
+	local baseList = _binding_1.baseList
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "List"
+	end
+	_attributes.key = _condition
+	for _k, _v in baseList do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
+end
+local default = List
+return {
+	default = default,
+}

package/out/ui/packages/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Grid } from "./components/Grid";
+export { GridProps } from "./components/Grid";
+export * from "./components/Grid";
+export { default as List } from "./components/List";
+export { ListProps } from "./components/List";
+export * from "./components/List";

package/out/ui/packages/layout/init.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Grid = TS.import(script, script, "components", "Grid").default
+for _k, _v in TS.import(script, script, "components", "Grid") or {} do
+	exports[_k] = _v
+end
+exports.List = TS.import(script, script, "components", "List").default
+for _k, _v in TS.import(script, script, "components", "List") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/preloader/components/Preloader.luau

@@ -34,6 +34,7 @@ local function Preloader(props)
 	local Adornment = _binding.adornment
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local percentage, setPercentage = useState(0)
 	local loaded, setLoaded = useState(false)
 	local _binding_1 = usePreloaderStyles(props)
@@ -100,9 +101,12 @@ local function Preloader(props)
 			children = children,
 		})
 	else
-		local _attributes = {
-			key = "Preloader",
-		}
+		local _attributes = {}
+		local _condition = key
+		if not (_condition ~= "" and _condition) then
+			_condition = "Preloader"
+		end
+		_attributes.key = _condition
 		for _k, _v in container do
 			_attributes[_k] = _v
 		end
@@ -114,23 +118,23 @@ local function Preloader(props)
 		local _exp = Adornment ~= nil and React.createElement(Adornment, {
 			progress = percentage,
 		})
-		local _condition = icon ~= nil
-		if _condition then
+		local _condition_1 = icon ~= nil
+		if _condition_1 then
 			local _attributes_1 = table.clone(logo)
 			setmetatable(_attributes_1, nil)
-			_condition = React.createElement("imagelabel", _attributes_1)
+			_condition_1 = React.createElement("imagelabel", _attributes_1)
 		end
-		local _condition_1 = not hideProgressBar
-		if _condition_1 then
+		local _condition_2 = not hideProgressBar
+		if _condition_2 then
 			local _attributes_1 = table.clone(label)
 			setmetatable(_attributes_1, nil)
 			_attributes_1.Text = `Loading {if currentAsset ~= nil then currentAsset else "resources"}... {percentageStr}`
-			_condition_1 = (React.createElement(React.Fragment, nil, React.createElement("textlabel", _attributes_1), React.createElement(ProgressBar, {
+			_condition_2 = (React.createElement(React.Fragment, nil, React.createElement("textlabel", _attributes_1), React.createElement(ProgressBar, {
 				className = progressBar,
 				progress = percentage,
 			})))
 		end
-		_result = (React.createElement("frame", _attributes, _exp, _condition, _condition_1))
+		_result = (React.createElement("frame", _attributes, _exp, _condition_1, _condition_2))
 	end
 	return React.createElement(React.Fragment, nil, _result)
 end

package/out/ui/packages/progressBar/components/ProgressBar.d.ts

@@ -1,7 +1,6 @@
-import { WriteableStyle } from "../../../../theme/index";
+import { CustomizedProps } from "../../../../theme/index";
 export interface ProgressBarProps {
     progress: number;
-    className?: WriteableStyle<Frame>;
 }
-declare function ProgressBar({ progress, className }: ProgressBarProps): JSX.Element;
+declare function ProgressBar(props: CustomizedProps<Frame, ProgressBarProps>): JSX.Element;
 export default ProgressBar;

package/out/ui/packages/progressBar/components/ProgressBar.luau

@@ -2,19 +2,24 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
-local function ProgressBar(_param)
-	local progress = _param.progress
-	local className = _param.className
-	local _binding = useProgressBarStyles()
-	local container = _binding.container
-	local outer = _binding.outer
-	local stroke = _binding.stroke
-	local inner = _binding.inner
-	local fill = _binding.fill
-	local corner = _binding.corner
-	local _attributes = {
-		key = "ProgressBar",
-	}
+local function ProgressBar(props)
+	local _binding = props
+	local progress = _binding.progress
+	local className = _binding.className
+	local key = _binding.key
+	local _binding_1 = useProgressBarStyles()
+	local container = _binding_1.container
+	local outer = _binding_1.outer
+	local stroke = _binding_1.stroke
+	local inner = _binding_1.inner
+	local fill = _binding_1.fill
+	local corner = _binding_1.corner
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "ProgressBar"
+	end
+	_attributes.key = _condition
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/sidebar/components/Sidebar.luau

@@ -6,12 +6,16 @@ local function Sidebar(props)
 	local _binding = props
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local _binding_1 = useSidebarStyles(props)
 	local root = _binding_1.root
 	local container = _binding_1.container
-	local _attributes = {
-		key = "Sidebar",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Sidebar"
+	end
+	_attributes.key = _condition
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/toast/components/Toast.d.ts

@@ -1,3 +1,4 @@
+import { CustomizedProps } from "../../../../theme/index";
 import ToastVariants from "../enums/ToastVariants";
 export interface ToastProps {
     text: string;
@@ -6,5 +7,5 @@ export interface ToastProps {
     variant?: ToastVariants;
     toggledAt?: number;
 }
-declare function Toast(props: ToastProps): JSX.Element;
+declare function Toast(props: CustomizedProps<Frame, ToastProps>): JSX.Element;
 export default Toast;

package/out/ui/packages/toast/components/Toast.luau

@@ -18,6 +18,8 @@ local function Toast(props)
 	if duration == nil then
 		duration = 4
 	end
+	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useToastStyles(props)
 	local container = _binding_1.container
 	local label = _binding_1.label
@@ -53,13 +55,21 @@ local function Toast(props)
 			onDismiss()
 		end
 	end, {})
-	local _attributes = {
-		key = "Toast",
-		ref = frameRef,
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Toast"
+	end
+	_attributes.key = _condition
+	_attributes.ref = frameRef
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
 	local _exp = React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = UDim.new(0, DefaultTheme.shape.borderRadius),

package/out/ui/packages/treeView/components/TreeView.luau

@@ -16,6 +16,7 @@ local function TreeView(props)
 	local icon = _binding.icon
 	local filter = _binding.filter
 	local className = _binding.className
+	local key = _binding.key
 	local _binding_1 = useTreeViewStyles()
 	local root = _binding_1.root
 	local header = _binding_1.header
@@ -133,9 +134,12 @@ local function TreeView(props)
 		-- Set expanded to new array
 		setExpanded(newExpanded)
 	end, { tree, filter })
-	local _attributes = {
-		key = "TreeView",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "TreeView"
+	end
+	_attributes.key = _condition
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end
@@ -234,15 +238,15 @@ local function TreeView(props)
 					end
 				end,
 			}
-			local _condition = #branch.leaves > 0
-			if _condition then
+			local _condition_1 = #branch.leaves > 0
+			if _condition_1 then
 				local _attributes_5 = {}
 				local _branch = branch
 				_attributes_5.icon = if table.find(expanded, _branch) ~= nil then Icons.Expanded else Icons.Collapsed
 				_attributes_5.size = "xxs"
 				_attributes_5.className = branchIcon
 				_attributes_5.tint = DefaultTheme.options.constants.extendedPalette.Gray[70]
-				_condition = (React.createElement(Icon, _attributes_5))
+				_condition_1 = (React.createElement(Icon, _attributes_5))
 			end
 			local _attributes_5 = {
 				text = branch.title,
@@ -253,10 +257,10 @@ local function TreeView(props)
 			_attributes_5.color = "textPrimary"
 			_attributes_5.variant = "body"
 			_attributes_5.family = if selectedBranch == branch then "bold" else "default"
-			local _exp_3 = React.createElement("textbutton", _attributes_4, _condition, React.createElement(Typography, _attributes_5))
+			local _exp_3 = React.createElement("textbutton", _attributes_4, _condition_1, React.createElement(Typography, _attributes_5))
 			local _branch = branch
-			local _condition_1 = table.find(expanded, _branch) ~= nil
-			if _condition_1 then
+			local _condition_2 = table.find(expanded, _branch) ~= nil
+			if _condition_2 then
 				local _exp_4 = branch.leaves
 				-- ▼ ReadonlyArray.map ▼
 				local _newValue_1 = table.create(#_exp_4)
@@ -302,9 +306,9 @@ local function TreeView(props)
 					_newValue_1[_k] = _callback_1(_v, _k - 1, _exp_4)
 				end
 				-- ▲ ReadonlyArray.map ▲
-				_condition_1 = _newValue_1
+				_condition_2 = _newValue_1
 			end
-			return React.createElement(React.Fragment, nil, _exp_3, _condition_1)
+			return React.createElement(React.Fragment, nil, _exp_3, _condition_2)
 		else
 			return React.createElement(React.Fragment)
 		end

package/out/ui/packages/typography/components/Typography.luau

@@ -10,12 +10,16 @@ local function Typography(props)
 	end
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local _binding_1 = useTypographyStyles(props)
 	local root = _binding_1.root
 	local variantToken = _binding_1.variantToken
-	local _attributes = {
-		key = "Typography",
-	}
+	local _attributes = {}
+	local _condition = key
+	if not (_condition ~= "" and _condition) then
+		_condition = "Typography"
+	end
+	_attributes.key = _condition
 	for _k, _v in root do
 		_attributes[_k] = _v
 	end

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.30",
+	"version": "0.1.32",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {