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

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

@@ -2,7 +2,6 @@
 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
@@ -10,69 +9,47 @@ 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 = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Alert"
 	end
 	_attributes.key = _condition
-	_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 _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)
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
 	end
-	local _attributes_2 = table.clone(styles.stroke)
-	setmetatable(_attributes_2, nil)
-	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
+	if className then
+		for _k, _v in className do
+			_attributes[_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
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		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)
+	local _exp_2 = React.createElement("uistroke", _attributes_3)
 	local _attributes_4 = table.clone(styles.layout)
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uilistlayout", _attributes_4)
-	local _condition_3 = title ~= nil and title ~= ""
-	if _condition_3 then
+	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_1 = title ~= nil and title ~= ""
+	if _condition_1 then
 		local _attributes_5 = {
 			key = "Title",
 		}
@@ -80,7 +57,7 @@ local function Alert(props)
 			_attributes_5[_k] = _v
 		end
 		_attributes_5.Text = title
-		_condition_3 = React.createElement("textlabel", _attributes_5)
+		_condition_1 = React.createElement("textlabel", _attributes_5)
 	end
 	local _attributes_5 = {
 		key = "Message",
@@ -89,7 +66,24 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	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)))
+	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)
 end
 local default = Alert
 return {

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

@@ -1,7 +1,5 @@
 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,15 +6,12 @@ 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 = if filled == true then tone.main else tone.surface,
+			BackgroundColor3 = tone.surface,
 			BorderSizePixel = 0,
 		},
 		padding = {
@@ -27,17 +24,11 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = if filled == true then tone.main else tone.border,
+			Color = tone.border,
 			Thickness = 1,
-			Transparency = if filled == true then 1 else 0,
+			Transparency = 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,
@@ -52,7 +43,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = if filled == true then tone.on else tone.main,
+			TextColor3 = tone.main,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			LayoutOrder = 1,
 		},
@@ -71,18 +62,18 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
+	_object_1.TextColor3 = 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(closeSize, closeSize),
-		Position = UDim2.new(1, 0, 0, 0),
+		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+		Position = UDim2.new(1, -theme.padding.calc(1), 0, theme.padding.calc(1)),
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
+		ImageColor3 = theme.palette.text.secondary,
 		ScaleType = Enum.ScaleType.Fit,
 		ZIndex = 2,
 	}

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

@@ -1,10 +1,9 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { AppBarColor, AppBarElevation } from "./AppBar.styles";
+import { 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,7 +2,6 @@
 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
@@ -14,10 +13,6 @@ 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
@@ -25,21 +20,28 @@ local function AppBar(props)
 	local ref = _binding.ref
 	local styles = useAppBarStyles({
 		elevation = elevation,
-		color = color,
 		hasActions = children ~= nil,
 	})
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AppBar"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
+	_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
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
@@ -67,7 +69,7 @@ local function AppBar(props)
 		setmetatable(_attributes_3, nil)
 		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uilistlayout", _attributes_3), children))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1, _condition_2)
+	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1, _condition_2)
 end
 local default = AppBar
 return {

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

@@ -1,8 +1,6 @@
 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,10 +8,6 @@ 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
@@ -19,7 +15,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
-			BackgroundColor3 = if color == "primary" then theme.palette.primary.main elseif elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
+			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
 			BorderSizePixel = 0,
 			ZIndex = 11000,
 		},
@@ -41,7 +37,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary
+	_object_1.TextColor3 = theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextYAlignment = Enum.TextYAlignment.Center
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd

package/out/ui/packages/assetField/components/AssetField.luau

@@ -1,7 +1,6 @@
 -- 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
@@ -24,21 +23,26 @@ local function AssetField(props)
 	local ref = _binding.ref
 	local styles = useAssetFieldStyles()
 	local uri = if preview == true then assetPreviewUri(value) else nil
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AssetField"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
+	_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
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -63,7 +67,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(SxHost, _attributes, _exp, _exp_1, _condition_1)
+	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1)
 end
 local default = AssetField
 return {

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

@@ -13,10 +13,6 @@ 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
@@ -32,10 +28,6 @@ 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,10 +1,8 @@
 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,7 +2,6 @@
 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
@@ -12,57 +11,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 = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Avatar"
 	end
 	_attributes.key = _condition
-	_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)
+	_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
+	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_1 = {
+		local _attributes_2 = {
 			key = "Image",
 		}
 		for _k, _v in styles.image do
-			_attributes_1[_k] = _v
+			_attributes_2[_k] = _v
 		end
-		_attributes_1.Image = image
-		_result = (React.createElement("imagelabel", _attributes_1))
+		_attributes_2.Image = image
+		_result = (React.createElement("imagelabel", _attributes_2))
 	else
-		local _attributes_1 = {
+		local _attributes_2 = {
 			key = "Initials",
 		}
 		for _k, _v in styles.text do
-			_attributes_1[_k] = _v
+			_attributes_2[_k] = _v
 		end
-		_attributes_1.Text = avatarInitials(name)
-		_result = (React.createElement("textlabel", _attributes_1))
+		_attributes_2.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_2))
 	end
-	return React.createElement(SxHost, _attributes, _condition_1, _result)
+	return React.createElement("frame", _attributes, _exp, _result)
 end
 local default = Avatar
 return {

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

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

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

@@ -8,10 +8,6 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 	if size == nil then
 		size = 40
 	end
-	local variant = _param.variant
-	if variant == nil then
-		variant = "circular"
-	end
 	return createStyles({
 		root = {
 			Size = UDim2.fromOffset(size, size),
@@ -33,7 +29,7 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 			TextColor3 = theme.palette.primary.on,
 		},
 		corner = {
-			CornerRadius = if variant == "rounded" then UDim.new(0, theme.shape.borderRadius) else UDim.new(1, 0),
+			CornerRadius = UDim.new(1, 0),
 		},
 	})
 end)

package/out/ui/packages/badge/components/Badge.d.ts

@@ -1,12 +1,9 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { BadgeColor } from "./Badge.styles";
 export interface BadgeProps {
     count?: number;
     max?: number;
     invisible?: boolean;
-    variant?: "standard" | "dot";
-    color?: BadgeColor;
     children?: React.ReactNode;
 }
 declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;

package/out/ui/packages/badge/components/Badge.luau

@@ -2,7 +2,6 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local badgeText = TS.import(script, script.Parent, "badgeValue").badgeText
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBadgeStyles = TS.import(script, script.Parent, "Badge.styles").default
 local function Badge(props)
 	local _binding = props
@@ -18,37 +17,33 @@ local function Badge(props)
 	if invisible == nil then
 		invisible = false
 	end
-	local variant = _binding.variant
-	if variant == nil then
-		variant = "standard"
-	end
-	local color = _binding.color
-	if color == nil then
-		color = "error"
-	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBadgeStyles({
-		variant = variant,
-		color = color,
-	})
-	local isDot = variant == "dot"
-	local shown = not invisible and (isDot or count > 0)
-	local _attributes = {
-		tag = "frame",
-	}
+	local styles = useBadgeStyles()
+	local shown = not invisible and count > 0
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Badge"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
+	_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
 	local _exp = children
 	local _condition_1 = shown
 	if _condition_1 then
@@ -58,18 +53,15 @@ local function Badge(props)
 		for _k, _v in styles.badge do
 			_attributes_1[_k] = _v
 		end
-		_attributes_1.Text = if isDot then "" else badgeText(count, max)
-		local _condition_2 = isDot ~= true
-		if _condition_2 then
-			local _attributes_2 = table.clone(styles.padding)
-			setmetatable(_attributes_2, nil)
-			_condition_2 = React.createElement("uipadding", _attributes_2)
-		end
-		local _attributes_2 = table.clone(styles.corner)
+		_attributes_1.Text = badgeText(count, max)
+		local _attributes_2 = table.clone(styles.padding)
 		setmetatable(_attributes_2, nil)
-		_condition_1 = (React.createElement("textlabel", _attributes_1, _condition_2, React.createElement("uicorner", _attributes_2)))
+		local _exp_1 = React.createElement("uipadding", _attributes_2)
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = (React.createElement("textlabel", _attributes_1, _exp_1, React.createElement("uicorner", _attributes_3)))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _condition_1)
+	return React.createElement("frame", _attributes, _exp, _condition_1)
 end
 local default = Badge
 return {

package/out/ui/packages/badge/components/Badge.styles.d.ts

@@ -1,6 +1,2 @@
-export type BadgeColor = "error" | "primary" | "success";
-declare const useBadgeStyles: (props: {
-    variant?: "standard" | "dot";
-    color?: BadgeColor;
-}) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useBadgeStyles: () => import("../../../../theme/index").ClassNameMap<string>;
 export default useBadgeStyles;