@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

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

@@ -4,7 +4,15 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
 local _gridProps = TS.import(script, script.Parent, "gridProps")
 local gridCornerKey = _gridProps.gridCornerKey
 local gridMaxCells = _gridProps.gridMaxCells
@@ -92,7 +100,9 @@ local function Grid(props)
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useGridStyles({
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _binding_2 = useGridStyles({
 		cellPadding = cellPadding,
 		cellSize = cellSize,
 		gap = gap,
@@ -105,25 +115,80 @@ local function Grid(props)
 		horizontalAlignment = horizontalAlignment,
 		verticalAlignment = verticalAlignment,
 	})
-	local baseGrid = _binding_1.baseGrid
-	local baseLayout = _binding_1.baseLayout
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Grid"
-	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = baseGrid
-	_attributes.className = className
-	_attributes.sx = sx
-	local _attributes_1 = {
+	local baseGrid = _binding_2.baseGrid
+	local baseLayout = _binding_2.baseLayout
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = padActive(left, right, top, bottom)
+	local _result_4 = sx
+	if _result_4 ~= nil then
+		_result_4 = _result_4.AutomaticSize
+	end
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = styleAutomaticSize(baseGrid)
+	end
+	local auto = automaticAxes(_condition_4)
+	local _attributes = {
 		key = "GridLayout",
 	}
 	for _k, _v in baseLayout do
-		_attributes_1[_k] = _v
+		_attributes[_k] = _v
+	end
+	local body = (React.createElement(React.Fragment, nil, React.createElement("uigridlayout", _attributes), children))
+	local _attributes_1 = {}
+	local _condition_5 = id
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5 ~= "" and _condition_5) then
+		_condition_5 = "Grid"
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("uigridlayout", _attributes_1), children)
+	_attributes_1.key = _condition_5
+	_attributes_1.hostRef = ref
+	_attributes_1.base = baseGrid
+	_attributes_1.className = className
+	_attributes_1.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes_1, if inset then (React.createElement(Pad, {
+		left = left,
+		right = right,
+		top = top,
+		bottom = bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, body)) else body)
 end
 local default = Grid
 return {

package/out/ui/packages/layout/components/Pad.d.ts

@@ -0,0 +1,24 @@
+import React from "@rbxts/react";
+/** Padding on the host offsets scale-sized children without shrinking them. */
+export declare function withoutPad(sx: object | undefined): {
+    [key: string]: unknown;
+} | undefined;
+export declare function styleAutomaticSize(style: object): Enum.AutomaticSize | undefined;
+export declare function automaticAxes(value: Enum.AutomaticSize | undefined): {
+    x: boolean;
+    y: boolean;
+};
+export declare function padActive(left: number, right: number, top: number, bottom: number): boolean;
+/**
+ * Fixed axes use a shrunk size so scale children stop at the padding.
+ * Automatic axes keep trailing padding on the content instead.
+ */
+export declare function Pad(props: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    autoX: boolean;
+    autoY: boolean;
+    children?: React.ReactNode;
+}): JSX.Element;

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

@@ -0,0 +1,88 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local function isPadKey(key)
+	return key == "p" or key == "px" or key == "py" or key == "pt" or key == "pr" or key == "pb" or key == "pl" or key == "padding"
+end
+--* Padding on the host offsets scale-sized children without shrinking them. 
+local function withoutPad(sx)
+	if sx == nil then
+		return nil
+	end
+	local rest = {}
+	local kept = false
+	for key, value in pairs(sx) do
+		local name = tostring(key)
+		if isPadKey(name) then
+			continue
+		end
+		rest[name] = value
+		kept = true
+	end
+	return if kept then rest else nil
+end
+local function styleAutomaticSize(style)
+	return style.AutomaticSize
+end
+local function automaticAxes(value)
+	if value == Enum.AutomaticSize.X then
+		return {
+			x = true,
+			y = false,
+		}
+	end
+	if value == Enum.AutomaticSize.Y then
+		return {
+			x = false,
+			y = true,
+		}
+	end
+	if value == Enum.AutomaticSize.XY then
+		return {
+			x = true,
+			y = true,
+		}
+	end
+	return {
+		x = false,
+		y = false,
+	}
+end
+local function padActive(left, right, top, bottom)
+	return left + right + top + bottom > 0
+end
+--[[
+	*
+	 * Fixed axes use a shrunk size so scale children stop at the padding.
+	 * Automatic axes keep trailing padding on the content instead.
+	 
+]]
+local function Pad(props)
+	local _binding = props
+	local left = _binding.left
+	local right = _binding.right
+	local top = _binding.top
+	local bottom = _binding.bottom
+	local autoX = _binding.autoX
+	local autoY = _binding.autoY
+	local children = _binding.children
+	local auto = if autoX and autoY then Enum.AutomaticSize.XY elseif autoY then Enum.AutomaticSize.Y elseif autoX then Enum.AutomaticSize.X else Enum.AutomaticSize.None
+	return React.createElement("frame", {
+		key = "Pad",
+		Position = UDim2.new(0, left, 0, top),
+		Size = UDim2.new(if autoX then 0 else 1, if autoX then 0 else -(left + right), if autoY then 0 else 1, if autoY then 0 else -(top + bottom)),
+		AutomaticSize = auto,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, if autoX or autoY then (React.createElement("uipadding", {
+		PaddingRight = UDim.new(0, if autoX then right else 0),
+		PaddingBottom = UDim.new(0, if autoY then bottom else 0),
+	})) else nil, children)
+end
+return {
+	withoutPad = withoutPad,
+	styleAutomaticSize = styleAutomaticSize,
+	automaticAxes = automaticAxes,
+	padActive = padActive,
+	Pad = Pad,
+}

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

@@ -1,7 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
 local useStackStyles = TS.import(script, script.Parent, "Stack.styles").default
 local function Stack(props)
 	local _binding = props
@@ -16,6 +25,8 @@ local function Stack(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useStackStyles({
 		direction = direction,
 		spacing = spacing,
@@ -24,19 +35,74 @@ local function Stack(props)
 		alignItems = alignItems,
 		justifyContent = justifyContent,
 	})
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Stack"
-	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.list)
-	setmetatable(_attributes_1, nil)
-	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", _attributes_1), children)
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = padActive(left, right, top, bottom)
+	local _result_4 = sx
+	if _result_4 ~= nil then
+		_result_4 = _result_4.AutomaticSize
+	end
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = styleAutomaticSize(styles.root)
+	end
+	local auto = automaticAxes(_condition_4)
+	local _attributes = table.clone(styles.list)
+	setmetatable(_attributes, nil)
+	local body = (React.createElement(React.Fragment, nil, React.createElement("uilistlayout", _attributes), children))
+	local _attributes_1 = {}
+	local _condition_5 = id
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5 ~= "" and _condition_5) then
+		_condition_5 = "Stack"
+	end
+	_attributes_1.key = _condition_5
+	_attributes_1.hostRef = ref
+	_attributes_1.base = styles.root
+	_attributes_1.className = className
+	_attributes_1.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes_1, if inset then (React.createElement(Pad, {
+		left = left,
+		right = right,
+		top = top,
+		bottom = bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, body)) else body)
 end
 local default = Stack
 return {

package/out/ui/packages/link/components/Link.luau

@@ -25,10 +25,10 @@ local function Link(props)
 	local ref = _binding.ref
 	local hover, setHover = useState(false)
 	local showUnderline = underline == "always" or (underline == "hover" and hover)
+	local reserve = underline ~= "none"
 	local styles = useLinkStyles({
 		color = color,
 		disabled = disabled,
-		showUnderline = showUnderline,
 	})
 	local active = canActivate(disabled)
 	local _attributes = {
@@ -66,13 +66,23 @@ local function Link(props)
 			return setHover(false)
 		end,
 	}
-	local _attributes_1 = {
-		key = "Underline",
-	}
-	for _k, _v in styles.underline do
-		_attributes_1[_k] = _v
+	local _result
+	if reserve then
+		local _attributes_1 = table.clone(styles.reserve)
+		setmetatable(_attributes_1, nil)
+		local _exp = React.createElement("uipadding", _attributes_1)
+		local _attributes_2 = {
+			key = "Underline",
+		}
+		for _k, _v in styles.underline do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.BackgroundTransparency = if showUnderline then 0 else 1
+		_result = (React.createElement(React.Fragment, nil, _exp, React.createElement("frame", _attributes_2)))
+	else
+		_result = nil
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1))
+	return React.createElement(SxHost, _attributes, _result)
 end
 local default = Link
 return {

package/out/ui/packages/link/components/Link.styles.d.ts

@@ -3,6 +3,5 @@ export type LinkUnderline = "always" | "hover" | "none";
 declare const useLinkStyles: (props: {
     color?: LinkColor;
     disabled?: boolean;
-    showUnderline?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useLinkStyles;

package/out/ui/packages/link/components/Link.styles.luau

@@ -24,10 +24,6 @@ local useLinkStyles = componentStyles("Link", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
-	local showUnderline = _param.showUnderline
-	if showUnderline == nil then
-		showUnderline = true
-	end
 	local ink = linkColor(theme, color, disabled)
 	return createStyles({
 		root = {
@@ -48,9 +44,11 @@ local useLinkStyles = componentStyles("Link", function(theme, _param)
 			Position = UDim2.new(0, 0, 1, 0),
 			AnchorPoint = Vector2.new(0, 1),
 			BackgroundColor3 = ink,
-			BackgroundTransparency = if showUnderline then 0 else 1,
 			BorderSizePixel = 0,
 		},
+		reserve = {
+			PaddingBottom = UDim.new(0, 1),
+		},
 	})
 end)
 local default = useLinkStyles

package/out/ui/packages/listItem/components/ListItem.d.ts

@@ -1,4 +1,6 @@
+import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { ListItemTone } from "./listItemInk";
 export interface ListItemProps {
     text: string;
     secondary?: string;
@@ -6,6 +8,10 @@ export interface ListItemProps {
     disabled?: boolean;
     dense?: boolean;
     divider?: boolean;
+    wrap?: boolean;
+    tone?: ListItemTone;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
     onActivated?: () => void;
 }
 declare function ListItem(props: CustomizedProps<TextButton, ListItemProps>): JSX.Element;

package/out/ui/packages/listItem/components/ListItem.luau

@@ -1,7 +1,16 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+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 _listItemLayout = TS.import(script, script.Parent, "listItemLayout")
+local listItemCopyInset = _listItemLayout.listItemCopyInset
+local listItemFill = _listItemLayout.listItemFill
+local listItemRowInset = _listItemLayout.listItemRowInset
+local listItemTrailInset = _listItemLayout.listItemTrailInset
 local useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
 local function ListItem(props)
 	local _binding = props
@@ -23,6 +32,13 @@ local function ListItem(props)
 	if divider == nil then
 		divider = false
 	end
+	local wrap = _binding.wrap
+	if wrap == nil then
+		wrap = false
+	end
+	local tone = _binding.tone
+	local leading = _binding.leading
+	local trailing = _binding.trailing
 	local onActivated = _binding.onActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -32,62 +48,155 @@ local function ListItem(props)
 		selected = selected,
 		disabled = disabled,
 		dense = dense,
+		wrap = wrap,
+		tone = tone,
+		divider = divider,
+	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local hovering, setHovering = useState(false)
+	local down, setDown = useState(false)
+	local face = listItemFill({
+		disabled = disabled,
+		selected = selected,
+		hover = hovering and not disabled,
+		down = down and not disabled,
 	})
+	local fill = if face == "pressed" then theme.palette.action.pressed elseif face == "hover" then theme.palette.action.hover else theme.palette.action.selected
+	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
+	local lead = listItemCopyInset(leading ~= nil)
+	useEffect(function()
+		if not disabled then
+			return nil
+		end
+		setHovering(false)
+		setDown(false)
+	end, { disabled })
+	local trail = listItemTrailInset(trailing ~= nil)
+	local rowInset = listItemRowInset(leading ~= nil, trailing ~= nil)
+	local textSize = UDim2.new(1, if rowInset > 0 then 0 else -pad * 2, 0, 0)
 	local _attributes = {
+		key = "Primary",
+	}
+	for _k, _v in styles.primary do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = textSize
+	_attributes.Text = text
+	local _exp = React.createElement("textlabel", _attributes)
+	local _result
+	if secondary ~= nil and #secondary > 0 then
+		local _attributes_1 = {
+			key = "Secondary",
+		}
+		for _k, _v in styles.secondary do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Size = textSize
+		_attributes_1.Text = secondary
+		_result = (React.createElement("textlabel", _attributes_1))
+	else
+		_result = nil
+	end
+	local copy = (React.createElement(React.Fragment, nil, _exp, _result))
+	local _attributes_1 = {
 		tag = "textbutton",
 	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "ListItem"
 	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
+	_attributes_1.key = _condition
+	_attributes_1.hostRef = ref
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	_object.BackgroundColor3 = fill
+	_object.BackgroundTransparency = if face == "clear" then 1 else 0
+	_attributes_1.base = _object
+	_attributes_1.className = className
+	_attributes_1.sx = sx
+	_attributes_1.state = {
 		disabled = disabled,
 		selected = selected,
+		hover = hovering,
+		pressed = down,
 	}
-	_attributes.Text = ""
-	_attributes.Active = not disabled
-	_attributes.Selectable = not disabled
-	_attributes.AutoButtonColor = false
-	_attributes.Event = {
+	_attributes_1.Text = ""
+	_attributes_1.Active = not disabled
+	_attributes_1.Selectable = not disabled
+	_attributes_1.AutoButtonColor = false
+	_attributes_1.Event = {
 		Activated = function()
 			if not disabled and onActivated ~= nil then
 				onActivated()
 			end
 		end,
+		MouseEnter = function()
+			if not disabled then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			setHovering(false)
+			setDown(false)
+		end,
+		MouseButton1Down = function()
+			if not disabled then
+				setDown(true)
+			end
+		end,
+		MouseButton1Up = function()
+			return setDown(false)
+		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.list)
+	local _attributes_2 = table.clone(styles.padding)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	local _attributes_3 = {
-		key = "Primary",
-	}
-	for _k, _v in styles.primary do
-		_attributes_3[_k] = _v
-	end
-	_attributes_3.Text = text
-	local _exp_2 = React.createElement("textlabel", _attributes_3)
-	local _result
-	if secondary ~= nil and #secondary > 0 then
-		local _attributes_4 = {
-			key = "Secondary",
-		}
-		for _k, _v in styles.secondary do
-			_attributes_4[_k] = _v
-		end
-		_attributes_4.Text = secondary
-		_result = (React.createElement("textlabel", _attributes_4))
+	local _exp_1 = React.createElement("uipadding", _attributes_2)
+	local _attributes_3 = table.clone(styles.list)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
+	local _result_1
+	if rowInset > 0 then
+		local _exp_3 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			Padding = UDim.new(0, 8),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		local _exp_4 = if lead > 0 then (React.createElement("frame", {
+			key = "Lead",
+			LayoutOrder = 0,
+			Size = UDim2.fromOffset(lead, lead),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, leading)) else nil
+		local _attributes_4 = table.clone(styles.list)
+		setmetatable(_attributes_4, nil)
+		_result_1 = (React.createElement("frame", {
+			key = "Body",
+			Size = UDim2.new(1, -pad * 2, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, _exp_3, _exp_4, React.createElement("frame", {
+			key = "Copy",
+			LayoutOrder = 1,
+			Size = UDim2.new(1, -rowInset, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, React.createElement("uilistlayout", _attributes_4), copy), if trail > 0 then (React.createElement("frame", {
+			key = "Trail",
+			LayoutOrder = 2,
+			Size = UDim2.new(0, trail, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		}, trailing)) else nil))
 	else
-		_result = nil
+		_result_1 = copy
 	end
-	local _result_1
+	local _result_2
 	if divider == true then
 		local _attributes_4 = {
 			key = "Divider",
@@ -95,11 +204,17 @@ local function ListItem(props)
 		for _k, _v in styles.divider do
 			_attributes_4[_k] = _v
 		end
-		_result_1 = React.createElement("frame", _attributes_4)
+		local _attributes_5 = {
+			key = "Line",
+		}
+		for _k, _v in styles.line do
+			_attributes_5[_k] = _v
+		end
+		_result_2 = (React.createElement("frame", _attributes_4, React.createElement("frame", _attributes_5)))
 	else
-		_result_1 = nil
+		_result_2 = nil
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result, _result_1)
+	return React.createElement(SxHost, _attributes_1, _exp_1, _exp_2, _result_1, _result_2)
 end
 local default = ListItem
 return {