@rbxts/uiblox 0.2.0-alpha.25 → 0.2.0-alpha.27

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

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
@@ -20,26 +21,18 @@ local function Divider(props)
 	local captionPad = _binding_1.captionPad
 	local label = dividerLabel(text)
 	if label ~= nil and orientation ~= Orientations.Vertical then
-		local _attributes = {}
+		local _attributes = {
+			tag = "frame",
+		}
 		local _condition = id
 		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 			_condition = "Divider"
 		end
 		_attributes.key = _condition
-		_attributes.ref = ref
-		for _k, _v in shell do
-			_attributes[_k] = _v
-		end
-		if className ~= 0 and className == className and className ~= "" and className then
-			for _k, _v in className do
-				_attributes[_k] = _v
-			end
-		end
-		if sx ~= 0 and sx == sx and sx ~= "" and sx then
-			for _k, _v in sx do
-				_attributes[_k] = _v
-			end
-		end
+		_attributes.hostRef = ref
+		_attributes.base = shell
+		_attributes.className = className
+		_attributes.sx = sx
 		local _attributes_1 = {
 			key = "Line",
 		}
@@ -56,30 +49,24 @@ local function Divider(props)
 		_attributes_2.Text = label
 		local _attributes_3 = table.clone(captionPad)
 		setmetatable(_attributes_3, nil)
-		return React.createElement("frame", _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
+		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Divider"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
-	_attributes.BorderSizePixel = 0
-	if className ~= 0 and className == className and className ~= "" and className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx ~= 0 and sx == sx and sx ~= "" and sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
-	return React.createElement("frame", _attributes)
+	_attributes.hostRef = ref
+	local _object = table.clone(root)
+	setmetatable(_object, nil)
+	_object.BorderSizePixel = 0
+	_attributes.base = _object
+	_attributes.className = className
+	_attributes.sx = sx
+	return React.createElement(SxHost, _attributes)
 end
 local default = Divider
 return {

package/out/ui/packages/drawer/components/Drawer.d.ts

@@ -1,4 +1,5 @@
 import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
 import { DrawerEdge } from "./drawerPlacement";
 export interface DrawerProps {
     host?: Instance;
@@ -8,5 +9,5 @@ export interface DrawerProps {
     onClose: () => void;
     children?: React.ReactNode;
 }
-declare function Drawer(props: DrawerProps): JSX.Element;
+declare function Drawer(props: CustomizedProps<Frame, DrawerProps>): JSX.Element;
 export default Drawer;

package/out/ui/packages/drawer/components/Drawer.luau

@@ -6,10 +6,11 @@ local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
 local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local isDismissInput = TS.import(script, script.Parent.Parent.Parent, "modal", "components", "dismissInput").isDismissInput
 local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
 local Portal = _popup.Portal
 local portalTarget = _popup.portalTarget
-local isDismissInput = TS.import(script, script.Parent.Parent.Parent, "modal", "components", "dismissInput").isDismissInput
 local drawerAnchor = TS.import(script, script.Parent, "drawerPlacement").drawerAnchor
 local useDrawerStyles = TS.import(script, script.Parent, "Drawer.styles").default
 local function Drawer(props)
@@ -23,6 +24,10 @@ local function Drawer(props)
 	local width = _binding.width
 	local onClose = _binding.onClose
 	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
 	local styles = useDrawerStyles({
 		width = width,
 	})
@@ -49,6 +54,7 @@ local function Drawer(props)
 		end
 	end, { open, layer })
 	local placement = drawerAnchor(edge)
+	local panelStyle = styles.panel
 	local _exp = React.createElement("frame", {
 		key = "DrawerAnchor",
 		ref = anchor,
@@ -77,18 +83,25 @@ local function Drawer(props)
 		}
 		local _exp_1 = React.createElement("textbutton", _attributes_1)
 		local _attributes_2 = {
-			key = "Panel",
+			tag = "frame",
 		}
-		for _k, _v in styles.panel do
-			_attributes_2[_k] = _v
+		local _condition_1 = id
+		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+			_condition_1 = "Panel"
 		end
+		_attributes_2.key = _condition_1
+		_attributes_2.hostRef = ref
+		_attributes_2.base = panelStyle
+		_attributes_2.className = className
+		_attributes_2.sx = sx
 		_attributes_2.AnchorPoint = Vector2.new(placement, 0)
 		_attributes_2.Position = UDim2.fromScale(placement, 0)
+		_attributes_2.ZIndex = panelStyle.ZIndex
 		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)
 		_condition = (React.createElement(Portal, {
 			host = layer,
-		}, React.createElement("frame", _attributes, _exp_1, React.createElement("frame", _attributes_2, React.createElement("uipadding", _attributes_3), children))))
+		}, React.createElement("frame", _attributes, _exp_1, React.createElement(SxHost, _attributes_2, React.createElement("uipadding", _attributes_3), children))))
 	end
 	return React.createElement(React.Fragment, nil, _exp, _condition)
 end

package/out/ui/packages/fab/components/Fab.luau

@@ -7,6 +7,7 @@ local useState = _react.useState
 local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local _fabSize = TS.import(script, script.Parent, "fabSize")
 local fabExtended = _fabSize.fabExtended
@@ -83,26 +84,24 @@ local function Fab(props)
 		_result = (React.createElement("imagelabel", _attributes))
 	end
 	local iconEl = _result
-	local _attributes = {}
+	local _attributes = {
+		tag = "textbutton",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Fab"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		loading = loading,
+		hover = hovering,
+		focused = focused,
+	}
 	_attributes.Active = active
 	_attributes.Selectable = active
 	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
@@ -135,29 +134,35 @@ local function Fab(props)
 	local _exp_1 = React.createElement(Shadow)
 	local _result_1
 	if extended then
-		local _attributes_2 = table.clone(styles.padding)
-		setmetatable(_attributes_2, nil)
-		local _exp_2 = React.createElement("uipadding", _attributes_2)
-		local _attributes_3 = table.clone(styles.row)
+		local _attributes_2 = {
+			key = "Content",
+		}
+		for _k, _v in styles.content do
+			_attributes_2[_k] = _v
+		end
+		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)
-		local _exp_3 = React.createElement("uilistlayout", _attributes_3)
+		local _exp_2 = React.createElement("uipadding", _attributes_3)
+		local _attributes_4 = table.clone(styles.row)
+		setmetatable(_attributes_4, nil)
+		local _exp_3 = React.createElement("uilistlayout", _attributes_4)
 		local _exp_4 = iconEl
 		local _condition_1 = not loading
 		if _condition_1 then
-			local _attributes_4 = {
+			local _attributes_5 = {
 				key = "Label",
 			}
 			for _k, _v in styles.label do
-				_attributes_4[_k] = _v
+				_attributes_5[_k] = _v
 			end
-			_attributes_4.Text = label
-			_condition_1 = React.createElement("textlabel", _attributes_4)
+			_attributes_5.Text = label
+			_condition_1 = React.createElement("textlabel", _attributes_5)
 		end
-		_result_1 = (React.createElement(React.Fragment, nil, _exp_2, _exp_3, _exp_4, _condition_1))
+		_result_1 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
 	else
 		_result_1 = iconEl
 	end
-	return React.createElement("textbutton", _attributes, _exp, _exp_1, _result_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
 end
 local default = Fab
 return {

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -31,6 +31,12 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(1, 0),
 		},
+		content = {
+			Size = UDim2.new(0, 0, 0, diameter),
+			AutomaticSize = Enum.AutomaticSize.X,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		padding = {
 			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
 			PaddingRight = UDim.new(0, theme.padding.calc(2.5)),

package/out/ui/packages/fontEditor/components/FontEditor.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local Select = TS.import(script, script.Parent.Parent.Parent, "select").Select
@@ -73,26 +74,21 @@ local function FontEditor(props)
 	local custom, setCustom = useState(value.Family)
 	local weights = enumOptions(Enum.FontWeight:GetEnumItems())
 	local stylesList = enumOptions(Enum.FontStyle:GetEnumItems())
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "FontEditor"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -215,7 +211,7 @@ local function FontEditor(props)
 	local _exp_7 = React.createElement("uicorner", _attributes_10)
 	local _attributes_11 = table.clone(styles.stroke)
 	setmetatable(_attributes_11, nil)
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_5, React.createElement("textlabel", _attributes_8, _exp_6, _exp_7, React.createElement("uistroke", _attributes_11)))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_5, React.createElement("textlabel", _attributes_8, _exp_6, _exp_7, React.createElement("uistroke", _attributes_11)))
 end
 local default = FontEditor
 return {

package/out/ui/packages/formText/components/FormHelperText.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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useFormTextStyles = TS.import(script, script.Parent, "FormText.styles").default
 local function FormHelperText(props)
 	local _binding = props
@@ -15,28 +16,23 @@ local function FormHelperText(props)
 		hasError = hasError,
 		disabled = disabled,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "textlabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "FormHelperText"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	_attributes.Text = text
-	return React.createElement("textlabel", _attributes)
+	return React.createElement(SxHost, _attributes)
 end
 local default = FormHelperText
 return {

package/out/ui/packages/formText/components/FormLabel.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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useFormTextStyles = TS.import(script, script.Parent, "FormText.styles").default
 local function FormLabel(props)
 	local _binding = props
@@ -17,28 +18,23 @@ local function FormLabel(props)
 		disabled = disabled,
 	})
 	local caption = if required == true then `{text} *` else text
-	local _attributes = {}
+	local _attributes = {
+		tag = "textlabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "FormLabel"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	_attributes.Text = caption
-	return React.createElement("textlabel", _attributes)
+	return React.createElement(SxHost, _attributes)
 end
 local default = FormLabel
 return {

package/out/ui/packages/gradientEditor/components/GradientEditor.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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _colorPicker = TS.import(script, script.Parent.Parent.Parent, "colorPicker")
 local ColorSequenceEditor = _colorPicker.ColorSequenceEditor
 local NumberSequenceEditor = _colorPicker.NumberSequenceEditor
@@ -21,26 +22,21 @@ local function GradientEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useGradientEditorStyles()
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "GradientEditor"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -159,7 +155,7 @@ local function GradientEditor(props)
 		_attributes_17[_k] = _v
 	end
 	_attributes_17.LayoutOrder = 4
-	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
+	return React.createElement(SxHost, _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
 		value = value.enabled,
 		disabled = disabled,
 		label = "Enabled",

package/out/ui/packages/host/components/SxHost.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+import { StyleState } from "../../../../theme/styles/utilities/resolveStyle";
+import { SxInput } from "../../../../theme/styles/utilities/resolveSx";
+export interface SxHostProps {
+    tag?: string;
+    base?: object;
+    className?: object;
+    sx?: SxInput | object;
+    state?: StyleState;
+    hostRef?: React.Ref<any>;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}
+declare function SxHost(props: SxHostProps): React.ReactElement<{
+    ref: (instance: GuiObject) => void;
+    children: React.Element<any, string | React.JSXElementConstructor<any>>[];
+}, string | React.JSXElementConstructor<any>>;
+export default SxHost;