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

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -8,6 +8,7 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	if open == nil then
 		open = false
 	end
+	local disabled = _param.disabled
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -27,19 +28,30 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
-			Active = true,
-			Selectable = true,
+			Active = disabled ~= true,
+			Selectable = disabled ~= true,
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.primary,
+			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		icon = {
+			Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
+			Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ImageColor3 = theme.palette.text.primary,
+			ImageTransparency = if disabled == true then 0.5 else 0,
+		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(1)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(1)),

package/out/ui/packages/accordion/components/accordionOpen.d.ts

@@ -1 +1,2 @@
 export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;
+export declare function accordionGlyph(open?: boolean): "expanded" | "collapsed";

package/out/ui/packages/accordion/components/accordionOpen.luau

@@ -5,6 +5,10 @@ local function accordionOpen(expanded, controlled)
 	end
 	return expanded == true
 end
+local function accordionGlyph(open)
+	return if open == true then "expanded" else "collapsed"
+end
 return {
 	accordionOpen = accordionOpen,
+	accordionGlyph = accordionGlyph,
 }

package/out/ui/packages/alert/components/Alert.d.ts

@@ -5,6 +5,8 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    filled?: boolean;
+    square?: boolean;
 }
 declare function Alert(props: CustomizedProps<Frame, AlertProps>): JSX.Element;
 export default Alert;

package/out/ui/packages/alert/components/Alert.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
 	local _binding = props
@@ -9,47 +10,69 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local filled = _binding.filled
+	local square = _binding.square
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local dismissible = onClose ~= nil
 	local styles = useAlertStyles({
 		severity = severity,
+		dismissible = dismissible,
+		filled = filled,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Alert"
 	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
 	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)
+	local _condition_1 = square ~= true
+	if _condition_1 then
+		local _attributes_2 = table.clone(styles.corner)
+		setmetatable(_attributes_2, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_2)
+	end
+	local _attributes_2 = table.clone(styles.stroke)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uicorner", _attributes_2)
-	local _attributes_3 = table.clone(styles.stroke)
-	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uistroke", _attributes_3)
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _condition_2 = dismissible
+	if _condition_2 then
+		local _attributes_3 = {
+			key = "Close",
+		}
+		for _k, _v in styles.close do
+			_attributes_3[_k] = _v
+		end
+		_attributes_3.Image = tostring(Icons.Close)
+		_attributes_3.Event = {
+			Activated = function()
+				return onClose()
+			end,
+		}
+		_condition_2 = (React.createElement("imagebutton", _attributes_3))
+	end
+	local _attributes_3 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_3[_k] = _v
+	end
 	local _attributes_4 = table.clone(styles.layout)
 	setmetatable(_attributes_4, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
-	local _condition_1 = title ~= nil and title ~= ""
-	if _condition_1 then
+	local _exp_2 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_3 = title ~= nil and title ~= ""
+	if _condition_3 then
 		local _attributes_5 = {
 			key = "Title",
 		}
@@ -57,7 +80,7 @@ local function Alert(props)
 			_attributes_5[_k] = _v
 		end
 		_attributes_5.Text = title
-		_condition_1 = React.createElement("textlabel", _attributes_5)
+		_condition_3 = React.createElement("textlabel", _attributes_5)
 	end
 	local _attributes_5 = {
 		key = "Message",
@@ -66,24 +89,7 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	local _exp_4 = React.createElement("textlabel", _attributes_5)
-	local _condition_2 = onClose ~= nil
-	if _condition_2 then
-		local _attributes_6 = {
-			key = "Close",
-		}
-		for _k, _v in styles.close do
-			_attributes_6[_k] = _v
-		end
-		_attributes_6.Image = tostring(Icons.Close)
-		_attributes_6.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_6))
-	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_1, _exp_4, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
 end
 local default = Alert
 return {

package/out/ui/packages/alert/components/Alert.styles.d.ts

@@ -1,5 +1,7 @@
 import { AlertSeverity } from "./alertTone";
 declare const useAlertStyles: (props: {
     severity?: AlertSeverity;
+    dismissible?: boolean;
+    filled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAlertStyles;

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -6,12 +6,15 @@ local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
+	local dismissible = _param.dismissible
+	local filled = _param.filled
 	local tone = theme.palette.status[alertSeverity(severity)]
+	local closeSize = theme.spacing.calc(2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = tone.surface,
+			BackgroundColor3 = if filled == true then tone.main else tone.surface,
 			BorderSizePixel = 0,
 		},
 		padding = {
@@ -24,11 +27,17 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = tone.border,
+			Color = if filled == true then tone.main else tone.border,
 			Thickness = 1,
-			Transparency = 0,
+			Transparency = if filled == true then 1 else 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		layout = {
 			FillDirection = Enum.FillDirection.Vertical,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
@@ -43,7 +52,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.main,
+			TextColor3 = if filled == true then tone.on else tone.main,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			LayoutOrder = 1,
 		},
@@ -62,18 +71,18 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
 	_object.close = {
-		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
-		Position = UDim2.new(1, -theme.padding.calc(1), 0, theme.padding.calc(1)),
+		Size = UDim2.fromOffset(closeSize, closeSize),
+		Position = UDim2.new(1, 0, 0, 0),
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = theme.palette.text.secondary,
+		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
 		ScaleType = Enum.ScaleType.Fit,
 		ZIndex = 2,
 	}

package/out/ui/packages/appBar/components/AppBar.d.ts

@@ -1,9 +1,10 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { AppBarElevation } from "./AppBar.styles";
+import { AppBarColor, AppBarElevation } from "./AppBar.styles";
 export interface AppBarProps {
     title?: string;
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     children?: React.ReactNode;
 }
 declare function AppBar(props: CustomizedProps<Frame, AppBarProps>): JSX.Element;

package/out/ui/packages/appBar/components/AppBar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAppBarStyles = TS.import(script, script.Parent, "AppBar.styles").default
 local function AppBar(props)
 	local _binding = props
@@ -13,63 +14,73 @@ local function AppBar(props)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "default"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local hasActions = children ~= nil
 	local styles = useAppBarStyles({
 		elevation = elevation,
-		hasActions = children ~= nil,
+		color = color,
+		hasActions = hasActions,
 	})
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "AppBar"
-	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
+	local _condition = title ~= ""
+	if _condition then
+		local _attributes = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
 			_attributes[_k] = _v
 		end
+		_attributes.Text = title
+		_condition = React.createElement("textlabel", _attributes)
 	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
+	local titleLabel = _condition
+	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 = "AppBar"
 	end
+	_attributes.key = _condition_1
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
 	local _exp_1 = elevation == "raised" and React.createElement(Shadow)
-	local _condition_1 = title ~= ""
-	if _condition_1 then
-		local _attributes_2 = {
-			key = "Title",
-		}
-		for _k, _v in styles.title do
-			_attributes_2[_k] = _v
-		end
-		_attributes_2.Text = title
-		_condition_1 = React.createElement("textlabel", _attributes_2)
-	end
-	local _condition_2 = children ~= nil
-	if _condition_2 then
-		local _attributes_2 = {
+	local _result
+	if hasActions then
+		local _attributes_2 = table.clone(styles.row)
+		setmetatable(_attributes_2, nil)
+		local _exp_2 = React.createElement("uilistlayout", _attributes_2)
+		local _exp_3 = titleLabel
+		local _attributes_3 = {
 			key = "Actions",
 		}
 		for _k, _v in styles.actions do
-			_attributes_2[_k] = _v
+			_attributes_3[_k] = _v
 		end
-		local _attributes_3 = table.clone(styles.actionsLayout)
-		setmetatable(_attributes_3, nil)
-		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uilistlayout", _attributes_3), children))
+		local _attributes_4 = table.clone(styles.actionsLayout)
+		setmetatable(_attributes_4, nil)
+		_result = (React.createElement("frame", {
+			key = "Row",
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, _exp_2, _exp_3, React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), children)))
+	else
+		_result = titleLabel
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result)
 end
 local default = AppBar
 return {

package/out/ui/packages/appBar/components/AppBar.styles.d.ts

@@ -1,6 +1,8 @@
 export type AppBarElevation = "flat" | "raised";
+export type AppBarColor = "default" | "primary";
 declare const useAppBarStyles: (props: {
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     hasActions?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAppBarStyles;

package/out/ui/packages/appBar/components/AppBar.styles.luau

@@ -8,6 +8,10 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "default"
+	end
 	local hasActions = _param.hasActions
 	if hasActions == nil then
 		hasActions = false
@@ -15,7 +19,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
-			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
+			BackgroundColor3 = if color == "primary" then theme.palette.primary.main elseif elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
 			BorderSizePixel = 0,
 			ZIndex = 11000,
 		},
@@ -23,10 +27,18 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
 			PaddingRight = UDim.new(0, theme.padding.calc(2)),
 		},
+		row = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			HorizontalFlex = Enum.UIFlexAlignment.SpaceBetween,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
 	}
 	local _left = "title"
 	local _object_1 = {
-		Size = UDim2.new(1, if hasActions then -theme.spacing.calc(8) else 0, 1, 0),
+		LayoutOrder = 1,
+		AutomaticSize = if hasActions then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
+		Size = if hasActions then UDim2.new(0, 0, 1, 0) else UDim2.new(1, 0, 1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Font = theme.typography.fontFamilies.default,
@@ -37,16 +49,15 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextYAlignment = Enum.TextYAlignment.Center
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
 	_object[_left] = _object_1
 	_object.actions = {
+		LayoutOrder = 2,
 		AutomaticSize = Enum.AutomaticSize.X,
 		Size = UDim2.new(0, 0, 1, 0),
-		Position = UDim2.new(1, 0, 0, 0),
-		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		ZIndex = 2,

package/out/ui/packages/assetField/components/AssetField.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 Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local useAssetFieldStyles = TS.import(script, script.Parent, "AssetField.styles").default
 local assetPreviewUri = TS.import(script, script.Parent, "assetPreviewUri").assetPreviewUri
@@ -23,26 +24,21 @@ local function AssetField(props)
 	local ref = _binding.ref
 	local styles = useAssetFieldStyles()
 	local uri = if preview == true then assetPreviewUri(value) else nil
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AssetField"
 	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.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -67,7 +63,7 @@ local function AssetField(props)
 		setmetatable(_attributes_3, nil)
 		_condition_1 = (React.createElement("imagelabel", _attributes_2, React.createElement("uicorner", _attributes_3)))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1)
 end
 local default = AssetField
 return {

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -13,6 +13,10 @@ local function Autocomplete(props)
 	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedMotion = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -28,6 +32,10 @@ local function Autocomplete(props)
 		loading = loading,
 		placeholder = placeholder,
 		searchable = autocompleteSearchable(searchable),
+		defaultOpen = defaultOpen,
+		defaultQuery = defaultQuery,
+		emptyText = emptyText,
+		empty = empty,
 		reducedMotion = reducedMotion,
 		size = size,
 		className = className,

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -1,8 +1,10 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { AvatarVariant } from "./Avatar.styles";
 export interface AvatarProps {
     name?: string;
     image?: string;
     size?: number;
+    variant?: AvatarVariant;
 }
 declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
 export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local avatarInitials = TS.import(script, script.Parent, "avatarText").avatarInitials
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAvatarStyles = TS.import(script, script.Parent, "Avatar.styles").default
 local function Avatar(props)
 	local _binding = props
@@ -11,57 +12,57 @@ local function Avatar(props)
 	end
 	local image = _binding.image
 	local size = _binding.size
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "circular"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useAvatarStyles({
 		size = size,
+		variant = variant,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Avatar"
 	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
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	local _condition_1 = variant ~= "square"
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.corner)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	local _attributes_1 = table.clone(styles.corner)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
 	local _result
 	if image ~= nil then
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Image",
 		}
 		for _k, _v in styles.image do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Image = image
-		_result = (React.createElement("imagelabel", _attributes_2))
+		_attributes_1.Image = image
+		_result = (React.createElement("imagelabel", _attributes_1))
 	else
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Initials",
 		}
 		for _k, _v in styles.text do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Text = avatarInitials(name)
-		_result = (React.createElement("textlabel", _attributes_2))
+		_attributes_1.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_1))
 	end
-	return React.createElement("frame", _attributes, _exp, _result)
+	return React.createElement(SxHost, _attributes, _condition_1, _result)
 end
 local default = Avatar
 return {

package/out/ui/packages/avatar/components/Avatar.styles.d.ts

@@ -1,4 +1,6 @@
+export type AvatarVariant = "circular" | "rounded" | "square";
 declare const useAvatarStyles: (props: {
     size?: number;
+    variant?: AvatarVariant;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAvatarStyles;