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

package/out/ui/packages/table/components/Table.luau

@@ -1,6 +1,8 @@
 -- 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 useState = _react.useState
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
@@ -12,6 +14,41 @@ local headerText = _tableColumns.headerText
 local isTextCell = _tableColumns.isTextCell
 local resolveColumn = _tableColumns.resolveColumn
 local useTableStyles = TS.import(script, script.Parent, "Table.styles").default
+local function TableRow(props)
+	local hovering, setHovering = useState(false)
+	local face = if props.selected then props.styles.selected elseif hovering then props.styles.hover else nil
+	local _attributes = {
+		key = `r-{props.rowIndex}`,
+	}
+	for _k, _v in cx(props.styles.row, face) do
+		_attributes[_k] = _v
+	end
+	_attributes.LayoutOrder = props.place + 1
+	_attributes.Event = {
+		Activated = props.onActivated,
+		MouseEnter = function()
+			return setHovering(true)
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
+	}
+	local _attributes_1 = table.clone(props.styles.rowStroke)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(props.styles.tail)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uipadding", _attributes_2)
+	local _attributes_3 = {
+		key = "Band",
+	}
+	for _k, _v in props.styles.band do
+		_attributes_3[_k] = _v
+	end
+	local _attributes_4 = table.clone(props.styles.cells)
+	setmetatable(_attributes_4, nil)
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), props.children))
+end
 local function textAlign(align)
 	if align == "center" then
 		return Enum.TextXAlignment.Center
@@ -75,12 +112,21 @@ local function Table(props)
 		_attributes_3[_k] = _v
 	end
 	_attributes_3.LayoutOrder = 0
-	local _attributes_4 = table.clone(styles.padding)
+	local _attributes_4 = table.clone(styles.rowStroke)
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uipadding", _attributes_4)
-	local _attributes_5 = table.clone(styles.cells)
+	local _exp_2 = React.createElement("uistroke", _attributes_4)
+	local _attributes_5 = table.clone(styles.tail)
 	setmetatable(_attributes_5, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	local _exp_3 = React.createElement("uipadding", _attributes_5)
+	local _attributes_6 = {
+		key = "Band",
+	}
+	for _k, _v in styles.band do
+		_attributes_6[_k] = _v
+	end
+	local _attributes_7 = table.clone(styles.cells)
+	setmetatable(_attributes_7, nil)
+	local _exp_4 = React.createElement("uilistlayout", _attributes_7)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue_1 = table.create(#resolved)
 	local _callback_1 = function(column, index)
@@ -92,22 +138,22 @@ local function Table(props)
 		local label = if type(_header) == "string" then headerText(column.header, active, sortDirection) else nil
 		local clickable = canSort(column.sortable, onSort ~= nil)
 		if clickable then
-			local _attributes_6 = {
+			local _attributes_8 = {
 				key = `h-{index}`,
 			}
 			for _k, _v in (cx(styles.cell, styles.headerCell)) do
-				_attributes_6[_k] = _v
+				_attributes_8[_k] = _v
 			end
 			local _condition_1 = label
 			if _condition_1 == nil then
 				_condition_1 = ""
 			end
-			_attributes_6.Text = _condition_1
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.AutoButtonColor = false
-			_attributes_6.LayoutOrder = index
-			_attributes_6.Event = {
+			_attributes_8.Text = _condition_1
+			_attributes_8.Size = box
+			_attributes_8.TextXAlignment = align
+			_attributes_8.AutoButtonColor = false
+			_attributes_8.LayoutOrder = index
+			_attributes_8.Event = {
 				Activated = function()
 					local _result = onSort
 					if _result ~= nil then
@@ -116,20 +162,20 @@ local function Table(props)
 					return _result
 				end,
 			}
-			return React.createElement("textbutton", _attributes_6, label == nil and (column.header))
+			return React.createElement("textbutton", _attributes_8, label == nil and (column.header))
 		end
 		if label ~= nil then
-			local _attributes_6 = {
+			local _attributes_8 = {
 				key = `h-{index}`,
 			}
 			for _k, _v in cx(styles.cell, styles.headerCell) do
-				_attributes_6[_k] = _v
+				_attributes_8[_k] = _v
 			end
-			_attributes_6.Text = label
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.LayoutOrder = index
-			return React.createElement("textlabel", _attributes_6)
+			_attributes_8.Text = label
+			_attributes_8.Size = box
+			_attributes_8.TextXAlignment = align
+			_attributes_8.LayoutOrder = index
+			return React.createElement("textlabel", _attributes_8)
 		end
 		return React.createElement("frame", {
 			key = `h-{index}`,
@@ -144,33 +190,11 @@ local function Table(props)
 		_newValue_1[_k] = _callback_1(_v, _k - 1, resolved)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue_1))
+	local _exp_5 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement("frame", _attributes_6, _exp_4, React.createElement(React.Fragment, nil, _newValue_1)))
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue_2 = table.create(#order)
 	local _callback_2 = function(rowIndex, place)
 		local cells = rows[rowIndex + 1]
-		local _attributes_6 = {
-			key = `r-{rowIndex}`,
-		}
-		for _k, _v in cx(styles.row, rowSelected(rowIndex, selected) and styles.selected) do
-			_attributes_6[_k] = _v
-		end
-		_attributes_6.LayoutOrder = place + 1
-		_attributes_6.Event = {
-			Activated = function()
-				local _result = onRowActivated
-				if _result ~= nil then
-					_result = _result(rowIndex)
-				end
-				return _result
-			end,
-		}
-		local _attributes_7 = table.clone(styles.padding)
-		setmetatable(_attributes_7, nil)
-		local _exp_5 = React.createElement("uipadding", _attributes_7)
-		local _attributes_8 = table.clone(styles.cells)
-		setmetatable(_attributes_8, nil)
-		local _exp_6 = React.createElement("uilistlayout", _attributes_8)
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue_3 = table.create(#resolved)
 		local _callback_3 = function(column, colIndex)
@@ -178,21 +202,23 @@ local function Table(props)
 			local box = UDim2.new(size.scale, size.offset, 0, 0)
 			local value = cells[colIndex + 1]
 			if isTextCell(value) then
-				local _attributes_9 = {
+				local _attributes_8 = {
 					key = `c-{rowIndex}-{colIndex}`,
 				}
 				for _k, _v in styles.cell do
-					_attributes_9[_k] = _v
+					_attributes_8[_k] = _v
 				end
 				local _condition_1 = value
 				if _condition_1 == nil then
 					_condition_1 = ""
 				end
-				_attributes_9.Text = _condition_1
-				_attributes_9.Size = box
-				_attributes_9.TextXAlignment = textAlign(column.align)
-				_attributes_9.LayoutOrder = colIndex
-				return React.createElement("textlabel", _attributes_9)
+				_attributes_8.Text = _condition_1
+				_attributes_8.Size = box
+				_attributes_8.TextXAlignment = textAlign(column.align)
+				_attributes_8.TextWrapped = column.wrap
+				_attributes_8.TextTruncate = if column.wrap then Enum.TextTruncate.None else Enum.TextTruncate.AtEnd
+				_attributes_8.LayoutOrder = colIndex
+				return React.createElement("textlabel", _attributes_8)
 			end
 			return React.createElement("frame", {
 				key = `c-{rowIndex}-{colIndex}`,
@@ -207,13 +233,26 @@ local function Table(props)
 			_newValue_3[_k] = _callback_3(_v, _k - 1, resolved)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_3))
+		return React.createElement(TableRow, {
+			key = `r-{rowIndex}`,
+			rowIndex = rowIndex,
+			place = place,
+			selected = rowSelected(rowIndex, selected),
+			styles = styles,
+			onActivated = function()
+				local _result = onRowActivated
+				if _result ~= nil then
+					_result = _result(rowIndex)
+				end
+				return _result
+			end,
+		}, React.createElement(React.Fragment, nil, _newValue_3))
 	end
 	for _k, _v in order do
 		_newValue_2[_k] = _callback_2(_v, _k - 1, order)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_2))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_5, React.createElement(React.Fragment, nil, _newValue_2))
 end
 local default = Table
 return {

package/out/ui/packages/table/components/Table.styles.luau

@@ -7,6 +7,7 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 	local dense = _param.dense
 	local padY = theme.padding.calc(if dense == true then 0.5 else 1)
 	local padX = theme.padding.calc(if dense == true then 1 else 1.5)
+	local heading = theme.typography.variants.h6
 	local textSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
 	return createStyles({
 		root = {
@@ -33,12 +34,22 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			BackgroundColor3 = theme.palette.action.selected,
 			BackgroundTransparency = 0,
 		},
+		hover = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = 0,
+		},
 		header = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = theme.palette.surface.input,
+			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 		},
+		rowStroke = {
+			Color = theme.palette.divider,
+			Thickness = 1,
+			Transparency = 0,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		cells = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
@@ -54,14 +65,20 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			TextTruncate = Enum.TextTruncate.AtEnd,
 		},
 		headerCell = {
-			Font = theme.typography.fontFamilies.semibold,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
 			TextColor3 = theme.palette.text.secondary,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, padY),
+		band = {
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		tail = {
 			PaddingBottom = UDim.new(0, padY),
-			PaddingLeft = UDim.new(0, padX),
-			PaddingRight = UDim.new(0, padX),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/table/components/tableColumns.d.ts

@@ -6,6 +6,7 @@ export interface TableColumnSpec {
     flex?: number;
     align?: TableAlign;
     sortable?: boolean;
+    wrap?: boolean;
 }
 export interface ResolvedColumn {
     header: unknown;
@@ -13,6 +14,7 @@ export interface ResolvedColumn {
     flex?: number;
     align: TableAlign;
     sortable: boolean;
+    wrap: boolean;
 }
 export interface ColumnSize {
     scale: number;

package/out/ui/packages/table/components/tableColumns.luau

@@ -6,6 +6,7 @@ local function resolveColumn(column)
 			header = column,
 			align = "left",
 			sortable = false,
+			wrap = false,
 		}
 	end
 	return {
@@ -14,6 +15,7 @@ local function resolveColumn(column)
 		flex = column.flex,
 		align = column.align or "left",
 		sortable = column.sortable == true,
+		wrap = column.wrap == true,
 	}
 end
 --* Scale/offset for each column. Number widths are scales. Flex shares whatever scale is left. 

package/out/ui/packages/tabs/components/Tabs.luau

@@ -162,17 +162,20 @@ local function Tabs(props)
 		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uipadding", _attributes_3)
+		local _attributes_4 = table.clone(styles.cap)
+		setmetatable(_attributes_4, nil)
+		local _exp_2 = React.createElement("uisizeconstraint", _attributes_4)
 		local _condition_1 = selected
 		if _condition_1 then
-			local _attributes_4 = {
+			local _attributes_5 = {
 				key = "Indicator",
 			}
 			for _k, _v in styles.indicator do
-				_attributes_4[_k] = _v
+				_attributes_5[_k] = _v
 			end
-			_condition_1 = React.createElement("frame", _attributes_4)
+			_condition_1 = React.createElement("frame", _attributes_5)
 		end
-		return React.createElement("textbutton", _attributes_2, _exp_1, _condition_1)
+		return React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, _condition_1)
 	end
 	for _k, _v in options do
 		_newValue[_k] = _callback(_v, _k - 1, options)

package/out/ui/packages/tabs/components/Tabs.styles.luau

@@ -3,12 +3,15 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local tabIndicatorBox = TS.import(script, script.Parent, "tabIndicator").tabIndicatorBox
 local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 	local orientation = _param.orientation
 	local centered = _param.centered
 	local vertical = tabsIsVertical(orientation)
 	local bar = theme.padding.calc(0.5)
+	local gutter = theme.padding.calc(2)
+	local mark = tabIndicatorBox(vertical, bar, gutter)
 	return createStyles({
 		root = {
 			Size = if vertical then UDim2.new(0, theme.spacing.calc(16), 1, 0) else UDim2.new(1, 0, 0, theme.spacing.calc(4)),
@@ -37,6 +40,10 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextXAlignment = if vertical then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		cap = {
+			MaxSize = Vector2.new(if vertical then math.huge else theme.spacing.calc(16), math.huge),
 		},
 		selected = {
 			TextColor3 = theme.palette.text.primary,
@@ -50,19 +57,13 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 			PaddingTop = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 			PaddingBottom = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 		},
-		indicator = if vertical then ({
-			Size = UDim2.new(0, bar, 1, -theme.padding.calc(2)),
-			Position = UDim2.new(0, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0, 0.5),
-			BackgroundColor3 = theme.palette.primary.main,
-			BorderSizePixel = 0,
-		}) else ({
-			Size = UDim2.new(1, theme.padding.calc(4), 0, bar),
-			Position = UDim2.fromScale(0.5, 1),
-			AnchorPoint = Vector2.new(0.5, 1),
+		indicator = {
+			Size = UDim2.new(mark.widthScale, mark.widthOffset, mark.heightScale, mark.heightOffset),
+			Position = if vertical then UDim2.new(0, 0, 0.5, 0) else UDim2.fromScale(0.5, 1),
+			AnchorPoint = if vertical then Vector2.new(0, 0.5) else Vector2.new(0.5, 1),
 			BackgroundColor3 = theme.palette.primary.main,
 			BorderSizePixel = 0,
-		}),
+		},
 	})
 end)
 local default = useTabsStyles

package/out/ui/packages/tabs/components/tabIndicator.d.ts

@@ -0,0 +1,7 @@
+/** Indicator box inside a tab. Horizontal width stays on the tab; a positive width offset spills into the next one. */
+export declare function tabIndicatorBox(vertical: boolean, bar: number, gutter: number): {
+    widthScale: number;
+    widthOffset: number;
+    heightScale: number;
+    heightOffset: number;
+};

package/out/ui/packages/tabs/components/tabIndicator.luau

@@ -0,0 +1,21 @@
+-- Compiled with roblox-ts v3.0.0
+--* Indicator box inside a tab. Horizontal width stays on the tab; a positive width offset spills into the next one. 
+local function tabIndicatorBox(vertical, bar, gutter)
+	if vertical then
+		return {
+			widthScale = 0,
+			widthOffset = bar,
+			heightScale = 1,
+			heightOffset = -gutter,
+		}
+	end
+	return {
+		widthScale = 1,
+		widthOffset = 0,
+		heightScale = 0,
+		heightOffset = bar,
+	}
+end
+return {
+	tabIndicatorBox = tabIndicatorBox,
+}

package/out/ui/packages/text/components/Text.d.ts

@@ -2,6 +2,8 @@ import { CustomizedProps } from "../../../../theme/index";
 export interface TextProps {
     text?: string;
     wrap?: boolean;
+    richText?: boolean;
+    fontFace?: Font;
 }
 declare function Text(props: CustomizedProps<TextLabel, TextProps>): JSX.Element;
 export default Text;

package/out/ui/packages/text/components/Text.luau

@@ -11,6 +11,8 @@ local function Text(props)
 		text = ""
 	end
 	local wrap = _binding.wrap
+	local richText = _binding.richText
+	local fontFace = _binding.fontFace
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -35,10 +37,18 @@ local function Text(props)
 		TextXAlignment = Enum.TextXAlignment.Left,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		Font = theme.typography.fontFamilies.default,
-		TextSize = theme.typography.fontSizes.body,
+		Font = theme.typography.fontFamilies[theme.typography.variants.body.family],
+		TextSize = theme.typography.variants.body.size,
+		LineHeight = theme.typography.variants.body.leading,
+		TextYAlignment = Enum.TextYAlignment.Top,
 		TextColor3 = theme.palette.text.primary,
+		RichText = richText == true,
 	}
+	for _k, _v in (if fontFace ~= nil then {
+		FontFace = fontFace,
+	} else {}) do
+		_object[_k] = _v
+	end
 	if className then
 		for _k, _v in className do
 			_object[_k] = _v

package/out/ui/packages/timeField/components/TimeField.luau

@@ -1,7 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local fieldChrome = TS.import(script, script.Parent.Parent.Parent, "input", "components", "fieldChrome").fieldChrome
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local resolveTime = TS.import(script, script.Parent.Parent, "timeValue").resolveTime
@@ -26,6 +29,7 @@ local function TimeField(props)
 	local ref = _binding.ref
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
+	local chrome = fieldChrome(controlMetrics(theme.density).height, theme.padding.calc(1))
 	local commit = function(hour, minute)
 		local resolved = resolveTime({
 			hour = hour,
@@ -58,15 +62,14 @@ local function TimeField(props)
 	_attributes.sx = sx
 	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Horizontal,
-		Padding = UDim.new(0, 4),
+		Padding = UDim.new(0, chrome.padX),
 		VerticalAlignment = Enum.VerticalAlignment.Center,
 		SortOrder = Enum.SortOrder.LayoutOrder,
 	}), React.createElement(NumberInput, {
 		value = value.hour,
 		step = 1,
 		disabled = disabled,
-		size = "small",
-		width = UDim.new(0, 56),
+		width = UDim.new(0, theme.spacing.calc(12)),
 		sx = {
 			LayoutOrder = 0,
 		},
@@ -78,7 +81,9 @@ local function TimeField(props)
 		LayoutOrder = 1,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		Size = UDim2.fromOffset(8, 24),
+		Size = UDim2.fromOffset(8, chrome.height),
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextWrapped = false,
 		Font = theme.typography.fontFamilies.default,
 		TextSize = theme.typography.fontSizes.body,
 		TextColor3 = theme.palette.text.secondary,
@@ -86,8 +91,7 @@ local function TimeField(props)
 		value = value.minute,
 		step = step,
 		disabled = disabled,
-		size = "small",
-		width = UDim.new(0, 56),
+		width = UDim.new(0, theme.spacing.calc(12)),
 		sx = {
 			LayoutOrder = 2,
 		},

package/out/ui/packages/timeline/components/Timeline.luau

@@ -28,70 +28,73 @@ local function Timeline(props)
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.list)
+	local _attributes_1 = table.clone(styles.inset)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
 	local _callback = function(item, index)
 		local tone = timelineTone(item.tone)
 		local mark = if tone == "done" then styles.done elseif tone == "active" then styles.active elseif tone == "error" then styles.error else styles.pending
 		local caption = item.caption
-		local _attributes_2 = {
+		local _attributes_3 = {
 			key = `{item.title}-{index}`,
 		}
 		for _k, _v in styles.item do
-			_attributes_2[_k] = _v
+			_attributes_3[_k] = _v
 		end
-		_attributes_2.LayoutOrder = index
-		local _attributes_3 = table.clone(styles.row)
-		setmetatable(_attributes_3, nil)
-		local _exp_1 = React.createElement("uilistlayout", _attributes_3)
-		local _attributes_4 = table.clone(styles.rail)
+		_attributes_3.LayoutOrder = index
+		local _attributes_4 = table.clone(styles.row)
 		setmetatable(_attributes_4, nil)
+		local _exp_2 = React.createElement("uilistlayout", _attributes_4)
+		local _attributes_5 = table.clone(styles.rail)
+		setmetatable(_attributes_5, nil)
 		local _result
 		if timelineRail(index, count) then
-			local _attributes_5 = table.clone(styles.line)
-			setmetatable(_attributes_5, nil)
-			_result = React.createElement("frame", _attributes_5)
+			local _attributes_6 = table.clone(styles.line)
+			setmetatable(_attributes_6, nil)
+			_result = React.createElement("frame", _attributes_6)
 		else
 			_result = nil
 		end
-		local _attributes_5 = table.clone(cx(styles.dot, mark))
-		setmetatable(_attributes_5, nil)
-		local _exp_2 = React.createElement("frame", _attributes_4, _result, React.createElement("frame", _attributes_5, React.createElement("uicorner", {
+		local _attributes_6 = table.clone(cx(styles.dot, mark))
+		setmetatable(_attributes_6, nil)
+		local _exp_3 = React.createElement("frame", _attributes_5, _result, React.createElement("frame", _attributes_6, React.createElement("uicorner", {
 			CornerRadius = UDim.new(1, 0),
 		})))
-		local _attributes_6 = table.clone(styles.body)
-		setmetatable(_attributes_6, nil)
-		local _attributes_7 = table.clone(styles.bodyPad)
+		local _attributes_7 = table.clone(styles.body)
 		setmetatable(_attributes_7, nil)
-		local _exp_3 = React.createElement("uipadding", _attributes_7)
-		local _attributes_8 = table.clone(styles.bodyList)
+		local _attributes_8 = table.clone(styles.bodyPad)
 		setmetatable(_attributes_8, nil)
-		local _exp_4 = React.createElement("uilistlayout", _attributes_8)
-		local _attributes_9 = table.clone(styles.title)
+		local _exp_4 = React.createElement("uipadding", _attributes_8)
+		local _attributes_9 = table.clone(styles.bodyList)
 		setmetatable(_attributes_9, nil)
-		_attributes_9.Text = item.title
-		_attributes_9.LayoutOrder = 0
-		local _exp_5 = React.createElement("textlabel", _attributes_9)
+		local _exp_5 = React.createElement("uilistlayout", _attributes_9)
+		local _attributes_10 = table.clone(styles.title)
+		setmetatable(_attributes_10, nil)
+		_attributes_10.Text = item.title
+		_attributes_10.LayoutOrder = 0
+		local _exp_6 = React.createElement("textlabel", _attributes_10)
 		local _result_1
 		if caption ~= nil and #caption > 0 then
-			local _attributes_10 = table.clone(styles.caption)
-			setmetatable(_attributes_10, nil)
-			_attributes_10.Text = caption
-			_attributes_10.LayoutOrder = 1
-			_result_1 = (React.createElement("textlabel", _attributes_10))
+			local _attributes_11 = table.clone(styles.caption)
+			setmetatable(_attributes_11, nil)
+			_attributes_11.Text = caption
+			_attributes_11.LayoutOrder = 1
+			_result_1 = (React.createElement("textlabel", _attributes_11))
 		else
 			_result_1 = nil
 		end
-		return React.createElement("frame", _attributes_2, _exp_1, _exp_2, React.createElement("frame", _attributes_6, _exp_3, _exp_4, _exp_5, _result_1))
+		return React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement("frame", _attributes_7, _exp_4, _exp_5, _exp_6, _result_1))
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, React.createElement(React.Fragment, nil, _newValue))
 end
 local default = Timeline
 return {