@rbxts/uiblox 0.1.31 → 0.1.32

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

@@ -60,6 +60,7 @@ local function Grid(props)
 	end
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local _binding_1 = useGridStyles({
 		cellPadding = cellPadding,
 		cellSize = cellSize,
@@ -72,9 +73,12 @@ local function Grid(props)
 	})
 	local baseGrid = _binding_1.baseGrid
 	local baseLayout = _binding_1.baseLayout
-	local _attributes = {
-		key = "grid",
-	}
+	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

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

@@ -60,6 +60,7 @@ local function List(props)
 	end
 	local className = _binding.className
 	local children = _binding.children
+	local key = _binding.key
 	local _binding_1 = useListStyles({
 		padding = padding,
 		fillDirection = fillDirection,
@@ -72,8 +73,15 @@ local function List(props)
 	})
 	local baseList = _binding_1.baseList
 	local baseLayout = _binding_1.baseLayout
-	local _attributes = table.clone(baseList)
-	setmetatable(_attributes, nil)
+	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

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.31",
+	"version": "0.1.32",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {