@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.31

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

@@ -7,6 +7,7 @@ local useEffect = _react.useEffect
 local useRef = _react.useRef
 local DEFAULT_THEME = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DEFAULT_THEME
 local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Directions
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local useToastStyles = TS.import(script, script.Parent, "Toast.styles").default
 local TWEEN_DURATION = 0.5
@@ -18,6 +19,8 @@ local function Toast(props)
 	if duration == nil then
 		duration = 4
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -26,6 +29,7 @@ local function Toast(props)
 	local container = _binding_1.container
 	local label = _binding_1.label
 	local close = _binding_1.close
+	local actionStyle = _binding_1.action
 	local activePosition = _binding_1.activePosition
 	local inActivePosition = _binding_1.inActivePosition
 	local frameRef = useRef()
@@ -57,26 +61,28 @@ local function Toast(props)
 			onDismiss()
 		end
 	end, {})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _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
+	_attributes.hostRef = function(instance)
+		frameRef.current = instance
+		if ref == nil then
+			return nil
 		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
+		if type(ref) == "function" then
+			ref(instance)
+			return nil
 		end
+		ref.current = instance
 	end
+	_attributes.base = container
+	_attributes.className = className
+	_attributes.sx = sx
 	local _exp = React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = UDim.new(0, DEFAULT_THEME.shape.borderRadius),
@@ -90,6 +96,28 @@ local function Toast(props)
 	end
 	_attributes_1.Text = text
 	local _exp_2 = React.createElement("textlabel", _attributes_1)
+	local _condition_1 = action ~= nil and #action > 0
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Action",
+		}
+		for _k, _v in actionStyle do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = action
+		_attributes_2.Event = {
+			Activated = function()
+				if onAction then
+					onAction()
+				end
+				tween(Directions.Out)
+				if onDismiss then
+					onDismiss()
+				end
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_2))
+	end
 	local _attributes_2 = {
 		key = "Close",
 	}
@@ -104,7 +132,7 @@ local function Toast(props)
 			end
 		end,
 	}
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("imagebutton", _attributes_2))
 end
 local default = Toast
 return {

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

@@ -11,6 +11,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 	if variant == nil then
 		variant = ToastVariants.default
 	end
+	local action = _param.action
 	local getToastColors = function()
 		repeat
 			if variant == (ToastVariants.success) then
@@ -38,31 +39,48 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 		until true
 	end
 	local toastColors = getToastColors()
+	local hasAction = action ~= nil and #action > 0
+	local actionSlot = if hasAction then theme.spacing.calc(8) else 0
 	local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
 	local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
 	return createStyles({
 		container = {
 			Size = UDim2.new(0, theme.spacing.calc(20), 0, theme.spacing.calc(4)),
-			Position = INACTIVE_POSITION,
+			Position = ACTIVE_POSITION,
 			BackgroundColor3 = toastColors.background,
 			AnchorPoint = Vector2.new(0.5, 1),
 			BorderSizePixel = 0,
 			ZIndex = 50000,
 		},
 		label = {
-			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
-			Position = UDim2.new(0.5, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0.5, 0.5),
+			Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 1, -theme.padding.calc(4)),
+			Position = if hasAction then UDim2.new(0, theme.padding.calc(2), 0.5, 0) else UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = if hasAction then Vector2.new(0, 0.5) else Vector2.new(0.5, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = toastColors.content,
 			Font = theme.typography.fontFamilies.default,
+			TextXAlignment = if hasAction then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
 			TextScaled = false,
 			ZIndex = 50001,
 		},
+		action = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.new(0, 0, 0, theme.spacing.calc(3)),
+			Position = UDim2.new(1, -(theme.padding.calc(2) + theme.options.constants.iconSizes.small + theme.padding.calc(1)), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = toastColors.content,
+			AutoButtonColor = false,
+			ZIndex = 50001,
+		},
 		close = {
-			Size = UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1)),
+			Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
 			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(1, 0),
 			ImageColor3 = toastColors.content,

package/out/ui/packages/toggleButton/components/ToggleButton.d.ts

@@ -0,0 +1,21 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { ChoiceOption } from "../../radioGroup/index";
+import { ToggleButtonOrientation } from "./ToggleButton.styles";
+export interface ToggleButtonProps {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    onActivated?: () => void;
+}
+declare function ToggleButton(props: CustomizedProps<TextButton, ToggleButtonProps>): JSX.Element;
+export interface ToggleButtonGroupProps<T> {
+    value: T;
+    options: ChoiceOption<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+    orientation?: ToggleButtonOrientation;
+}
+export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
+export default ToggleButton;

package/out/ui/packages/toggleButton/components/ToggleButton.luau

@@ -0,0 +1,129 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local useToggleButtonStyles = TS.import(script, script.Parent, "ToggleButton.styles").default
+local function ToggleButton(props)
+	local _binding = props
+	local label = _binding.label
+	local selected = _binding.selected
+	local disabled = _binding.disabled
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
+	local onActivated = _binding.onActivated
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useToggleButtonStyles({
+		selected = selected,
+		disabled = disabled,
+		size = size,
+	})
+	local active = canActivate(disabled)
+	local _attributes = {
+		tag = "textbutton",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ToggleButton"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		selected = selected,
+	}
+	_attributes.Text = label
+	_attributes.Active = active
+	_attributes.Selectable = active
+	_attributes.Event = {
+		Activated = function()
+			if active then
+				local _result = onActivated
+				if _result ~= nil then
+					_result()
+				end
+			end
+		end,
+	}
+	local _attributes_1 = table.clone(styles.padding)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = table.clone(styles.stroke)
+	setmetatable(_attributes_3, nil)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_3))
+end
+local function ToggleButtonGroup(props)
+	local _binding = props
+	local value = _binding.value
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local size = _binding.size
+	local orientation = _binding.orientation
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useToggleButtonStyles({
+		size = size,
+		orientation = orientation,
+	})
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ToggleButtonGroup"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.group
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(choice, index)
+		return React.createElement(ToggleButton, {
+			key = `{choice.label}-{index}`,
+			label = choice.label,
+			selected = choice.value == value,
+			disabled = disabled == true or choice.disabled == true,
+			size = size,
+			onActivated = function()
+				if choice.value ~= value then
+					onChange(choice.value)
+				end
+			end,
+			className = {
+				LayoutOrder = index,
+			},
+		})
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+end
+local default = ToggleButton
+return {
+	ToggleButtonGroup = ToggleButtonGroup,
+	default = default,
+}

package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts

@@ -0,0 +1,9 @@
+import { ControlSize } from "../../../../theme/index";
+export type ToggleButtonOrientation = "horizontal" | "vertical";
+declare const useToggleButtonStyles: (props: {
+    selected?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    orientation?: ToggleButtonOrientation;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useToggleButtonStyles;

package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _param)
+	local selected = _param.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local orientation = _param.orientation
+	if orientation == nil then
+		orientation = "horizontal"
+	end
+	local height = if size == "small" then theme.spacing.calc(3) elseif size == "large" then theme.spacing.calc(5) else theme.spacing.calc(4)
+	local textSize = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
+	local pad = theme.padding.calc(if size == "small" then 1 else 1.5)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.new(0, 0, 0, height),
+			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Active = not disabled,
+			Selectable = not disabled,
+			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = textSize,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = if selected then theme.palette.primary.main else theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Transparency = if disabled then 0.5 else 0,
+		},
+		group = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = if orientation == "vertical" then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+	})
+end)
+local default = useToggleButtonStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as ToggleButton, ToggleButtonGroup } from "./components/ToggleButton";
+export { ToggleButtonProps, ToggleButtonGroupProps } from "./components/ToggleButton";

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

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _ToggleButton = TS.import(script, script, "components", "ToggleButton")
+exports.ToggleButton = _ToggleButton.default
+exports.ToggleButtonGroup = _ToggleButton.ToggleButtonGroup
+return exports

package/out/ui/packages/tooltip/components/Tooltip.luau

@@ -7,6 +7,7 @@ local useRef = _react.useRef
 local useState = _react.useState
 local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
 local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local useTooltipStyles = TS.import(script, script.Parent, "Tooltip.styles").default
 local function Tooltip(props)
@@ -50,26 +51,18 @@ local function Tooltip(props)
 	useEffect(function()
 		return cancel
 	end, {})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition_1 = id
 	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
 		_condition_1 = "Tooltip"
 	end
 	_attributes.key = _condition_1
-	_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.Event = {
 		MouseEnter = function(rbx)
 			setAnchor(rbx)
@@ -111,7 +104,7 @@ local function Tooltip(props)
 			preferredHeight = tipHeight,
 		}, React.createElement("textlabel", _attributes_1, _exp_1, _exp_2, React.createElement("uistroke", _attributes_4))))
 	end
-	return React.createElement("frame", _attributes, _exp, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp, _condition_2)
 end
 local default = Tooltip
 return {

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

@@ -9,6 +9,7 @@ local useState = _react.useState
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local cx = _theme.cx
 local useTheme = _theme.useTheme
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Typography = TS.import(script, script.Parent.Parent.Parent, "typography").Typography
 local VirtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList").VirtualList
@@ -252,26 +253,18 @@ local function TreeView(props)
 			family = if bold then "bold" else "default",
 		}))
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "TreeView"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in 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 = root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = {}
 	local _object = {
 		Text = tree.title,
@@ -283,7 +276,7 @@ local function TreeView(props)
 	_attributes_1.color = "textSecondary"
 	_attributes_1.variant = "body"
 	_attributes_1.family = "bold"
-	return React.createElement("frame", _attributes, React.createElement(Typography, _attributes_1), React.createElement(VirtualList, {
+	return React.createElement(SxHost, _attributes, React.createElement(Typography, _attributes_1), React.createElement(VirtualList, {
 		key = "List",
 		items = rows,
 		getKey = function(entry)

package/out/ui/packages/typography/components/Typography.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 useTypographyStyles = TS.import(script, script.Parent, "Typography.styles").default
 local function Typography(props)
 	local _binding = props
@@ -16,31 +17,29 @@ local function Typography(props)
 	local _binding_1 = useTypographyStyles(props)
 	local root = _binding_1.root
 	local variantToken = _binding_1.variantToken
-	local _attributes = {}
+	local _attributes = {
+		tag = "textlabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Typography"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
-	_attributes.Text = text
+	_attributes.hostRef = ref
+	local _object = table.clone(root)
+	setmetatable(_object, nil)
+	_object.Text = text
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
-			_attributes[_k] = _v
+			_object[_k] = _v
 		end
 	end
 	for _k, _v in variantToken do
-		_attributes[_k] = _v
-	end
-	if sx ~= 0 and sx == sx and sx ~= "" and sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
+		_object[_k] = _v
 	end
-	return React.createElement("textlabel", _attributes, children)
+	_attributes.base = _object
+	_attributes.sx = sx
+	return React.createElement(SxHost, _attributes, children)
 end
 local default = Typography
 return {

package/out/ui/packages/udimEditor/components/UDimEditor.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 NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local _vectorValue = TS.import(script, script.Parent.Parent.Parent, "vectorEditor", "components", "vectorValue")
 local writeUDim = _vectorValue.writeUDim
@@ -41,26 +42,21 @@ local function UDimEditor(props)
 			onChange = commit,
 		})))
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "UDimEditor"
 	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)
@@ -119,7 +115,7 @@ local function UDimEditor(props)
 			return onChange(writeUDim(value, "Offset", amount))
 		end, 2)))
 	end
-	return React.createElement("frame", _attributes, _exp, _result)
+	return React.createElement(SxHost, _attributes, _exp, _result)
 end
 local default = UDimEditor
 return {

package/out/ui/packages/vectorEditor/components/VectorEditor.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 NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useVectorEditorStyles = TS.import(script, script.Parent, "VectorEditor.styles").default
 local _vectorValue = TS.import(script, script.Parent, "vectorValue")
@@ -19,26 +20,21 @@ local function VectorEditor(props)
 	local styles = useVectorEditorStyles()
 	local isVector3 = typeof(value) == "Vector3"
 	local axes = props.axes or (if isVector3 then ({ "X", "Y", "Z" }) else ({ "X", "Y" }))
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "VectorEditor"
 	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.row)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -79,7 +75,7 @@ local function VectorEditor(props)
 		_newValue[_k] = _callback(_v, _k - 1, axes)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, _newValue)
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
 end
 local default = VectorEditor
 return {

package/out/ui/packages/virtualList/components/EmptyListHint.d.ts

@@ -0,0 +1,7 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface EmptyListHintProps {
+    text: string;
+    height?: number;
+}
+declare function EmptyListHint(props: CustomizedProps<TextLabel, EmptyListHintProps>): JSX.Element;
+export default EmptyListHint;