@rbxts/uiblox 0.1.53 → 0.2.0-alpha.0

package/out/ui/packages/input/components/Input.d.ts

@@ -1,4 +1,5 @@
-import { CustomizedProps } from "../../../../theme/index";
+import React from "@rbxts/react";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { InputColor, InputMargin, InputVariant } from "../types/index";
 export type DefaultInputComponent = Frame;
 export interface InputProps {
@@ -13,7 +14,11 @@ export interface InputProps {
     placeholder?: string;
     rounded?: boolean;
     clearsTextOnFocus?: boolean;
+    size?: ControlSize;
+    startAdornment?: React.Element;
+    endAdornment?: React.Element;
     onTextChanged?: (text: string) => void;
+    onInput?: (text: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;

package/out/ui/packages/input/components/Input.luau

@@ -2,11 +2,22 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local useState = _react.useState
-local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
+local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
+local syncInputDraft = TS.import(script, script.Parent, "inputDraft").syncInputDraft
+local function adornmentAlign()
+	return React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+end
 local function Input(props)
 	local _binding = props
 	local text = _binding.text
@@ -28,29 +39,49 @@ local function Input(props)
 	if rounded == nil then
 		rounded = false
 	end
+	local startAdornment = _binding.startAdornment
+	local endAdornment = _binding.endAdornment
 	local onTextChanged = _binding.onTextChanged
+	local onInput = _binding.onInput
 	local onFocus = _binding.onFocus
 	local onBlur = _binding.onBlur
 	local onEnterPressed = _binding.onEnterPressed
 	local className = _binding.className
+	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useInputStyles(props)
+	local focusedRef = useRef(false)
+	local entered = useRef(false)
+	local _condition = text
+	if _condition == nil then
+		_condition = ""
+	end
+	local draft, setDraft = useState(_condition)
+	local focused, setFocused = useState(false)
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	_object.focused = focused
+	local _binding_1 = useInputStyles(_object)
 	local root = _binding_1.root
 	local font = _binding_1.font
 	local margin = _binding_1.margin
+	local shell = _binding_1.shell
 	local box = _binding_1.box
+	local startSlot = _binding_1.startSlot
+	local endSlot = _binding_1.endSlot
 	local helper = _binding_1.helper
 	local errorColorFrame = _binding_1.errorColorFrame
 	local errorColorText = _binding_1.errorColorText
 	local divider = _binding_1.divider
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
-	local _condition = text
-	if _condition == nil then
-		_condition = ""
-	end
-	local input, setInput = useState(_condition)
+	useEffect(function()
+		setDraft(function(current)
+			return syncInputDraft(focusedRef.current, text, current)
+		end)
+	end, { text })
+	local showStroke = variant == "outlined" or variant == "filled"
+	local showCorner = rounded
 	local _attributes = {}
 	local _condition_1 = id
 	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
@@ -66,6 +97,11 @@ local function Input(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "Margin",
 	}
@@ -73,81 +109,128 @@ local function Input(props)
 		_attributes_1[_k] = _v
 	end
 	local _attributes_2 = {
+		key = "Shell",
+	}
+	for _k, _v in shell do
+		_attributes_2[_k] = _v
+	end
+	local _condition_2 = showStroke
+	if _condition_2 then
+		local _attributes_3 = table.clone(stroke)
+		setmetatable(_attributes_3, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_3)
+	end
+	local _condition_3 = showCorner
+	if _condition_3 then
+		local _attributes_3 = table.clone(corner)
+		setmetatable(_attributes_3, nil)
+		_condition_3 = React.createElement("uicorner", _attributes_3)
+	end
+	local _condition_4 = startAdornment ~= nil
+	if _condition_4 then
+		local _attributes_3 = {
+			key = "Start",
+		}
+		for _k, _v in startSlot do
+			_attributes_3[_k] = _v
+		end
+		_condition_4 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
+	end
+	local _attributes_3 = {
 		key = "Field",
 	}
 	for _k, _v in font do
-		_attributes_2[_k] = _v
+		_attributes_3[_k] = _v
 	end
 	for _k, _v in box do
-		_attributes_2[_k] = _v
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Active = not disabled
-	_attributes_2.Text = input
-	_attributes_2.PlaceholderText = placeholder
-	for _k, _v in classNames({
-		[errorColorText] = hasError,
-	}) do
-		_attributes_2[_k] = _v
+	_attributes_3.Active = not disabled
+	_attributes_3.Text = draft
+	_attributes_3.PlaceholderText = placeholder
+	for _k, _v in cx(hasError and errorColorText) do
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Event = {
+	_attributes_3.Change = {
+		Text = function(rbx)
+			setDraft(rbx.Text)
+			if focusedRef.current and onInput then
+				onInput(rbx.Text)
+			end
+		end,
+	}
+	_attributes_3.Event = {
+		Focused = function()
+			focusedRef.current = true
+			entered.current = false
+			setFocused(true)
+			if onFocus then
+				onFocus()
+			end
+		end,
 		ReturnPressedFromOnScreenKeyboard = function(rbx)
-			if onEnterPressed then
-				local text = rbx.Text
-				onEnterPressed(text)
+			if entered.current or not onEnterPressed then
+				return nil
 			end
+			entered.current = true
+			onEnterPressed(rbx.Text)
 		end,
-		Focused = onFocus,
-		FocusLost = function(rbx)
+		FocusLost = function(rbx, enterPressed)
+			focusedRef.current = false
+			setFocused(false)
+			local committed = rbx.Text
 			if onTextChanged then
-				local text = rbx.Text
-				onTextChanged(text)
+				onTextChanged(committed)
 			end
+			if enterPressed and not entered.current and onEnterPressed then
+				onEnterPressed(committed)
+			end
+			entered.current = false
 			if onBlur then
 				onBlur()
 			end
+			local _condition_5 = text
+			if _condition_5 == nil then
+				_condition_5 = ""
+			end
+			setDraft(_condition_5)
 		end,
 	}
-	local _condition_2 = variant == "outlined"
-	if _condition_2 then
-		local _attributes_3 = table.clone(stroke)
-		setmetatable(_attributes_3, nil)
-		_condition_2 = React.createElement("uistroke", _attributes_3)
-	end
-	local _condition_3 = rounded
-	if _condition_3 then
-		local _attributes_3 = table.clone(corner)
-		setmetatable(_attributes_3, nil)
-		_condition_3 = React.createElement("uicorner", _attributes_3)
+	local _exp = React.createElement("textbox", _attributes_3)
+	local _condition_5 = endAdornment ~= nil
+	if _condition_5 then
+		local _attributes_4 = {
+			key = "End",
+		}
+		for _k, _v in endSlot do
+			_attributes_4[_k] = _v
+		end
+		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), endAdornment))
 	end
-	local _exp = React.createElement("textbox", _attributes_2, _condition_2, _condition_3)
-	local _exp_1 = React.createElement(Divider, {
+	local _exp_1 = React.createElement("frame", _attributes_2, _condition_2, _condition_3, _condition_4, _exp, _condition_5)
+	local _exp_2 = variant == "standard" and (React.createElement(Divider, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
-		className = classNames({
-			[errorColorFrame] = hasError,
-			[divider] = true,
-		}),
-	})
-	local _condition_4 = helperText ~= nil
-	if _condition_4 then
-		local _attributes_3 = {
+		className = cx(divider, hasError and errorColorFrame),
+	}))
+	local _condition_6 = helperText ~= nil
+	if _condition_6 then
+		local _attributes_4 = {
 			key = "HelperText",
 		}
 		for _k, _v in font do
-			_attributes_3[_k] = _v
+			_attributes_4[_k] = _v
 		end
 		for _k, _v in helper do
-			_attributes_3[_k] = _v
+			_attributes_4[_k] = _v
 		end
-		for _k, _v in classNames({
-			[errorColorText] = hasError,
-		}) do
-			_attributes_3[_k] = _v
+		for _k, _v in cx(hasError and errorColorText) do
+			_attributes_4[_k] = _v
 		end
-		_attributes_3.Text = helperText
-		_condition_4 = (React.createElement("textlabel", _attributes_3))
+		_attributes_4.Text = helperText
+		_condition_6 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _condition_4))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_6))
 end
 local default = Input
 return {

package/out/ui/packages/input/components/Input.styles.d.ts

@@ -1,3 +1,5 @@
 import { InputProps } from "./Input";
-declare const useInputStyles: (props: InputProps) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useInputStyles: (props: InputProps & {
+    focused?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useInputStyles;

package/out/ui/packages/input/components/Input.styles.luau

@@ -1,9 +1,11 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
-local makeStyles = _theme.makeStyles
-local useInputStyles = makeStyles(function(theme, _param)
+local componentStyles = _theme.componentStyles
+local inputInsets = TS.import(script, script.Parent, "inputInsets").inputInsets
+local useInputStyles = componentStyles("Input", function(theme, _param)
 	local color = _param.color
 	if color == nil then
 		color = "primary"
@@ -25,21 +27,37 @@ local useInputStyles = makeStyles(function(theme, _param)
 	if clearsTextOnFocus == nil then
 		clearsTextOnFocus = false
 	end
+	local startAdornment = _param.startAdornment
+	local endAdornment = _param.endAdornment
+	local focused = _param.focused
+	if focused == nil then
+		focused = false
+	end
+	local hasError = _param.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	local hasStart = startAdornment ~= nil
+	local hasEnd = endAdornment ~= nil
+	local icon = metrics.icon
+	local gap = theme.padding.calc(1)
+	local insets = inputInsets(hasStart, hasEnd, icon, gap)
+	local fieldHeight = metrics.height + (if variant == "standard" then 0 else theme.padding.calc(1))
+	local accent = if color == "primary" then theme.palette.primary.main else theme.palette.text.primary
+	local focusAccent = if hasError then theme.palette.status.error.main else theme.palette.focus
 	local makeRootStyles = function()
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
 		defaultStyles.BorderSizePixel = 0
-		defaultStyles.Size = UDim2.new(width.Scale, width.Offset, 0, if helperText ~= nil then theme.spacing.calc(4) else theme.spacing.calc(2))
-		-- Increase size vertically to account for margin
+		defaultStyles.Size = UDim2.new(width.Scale, width.Offset, 0, if helperText ~= nil then fieldHeight + metrics.height else fieldHeight)
 		repeat
-			if margin == "none" then
-				break
-			end
+			local _fallthrough = false
 			if margin == "dense" then
-				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
-				break
+				_fallthrough = true
 			end
-			if margin == "normal" then
+			if _fallthrough or margin == "normal" then
 				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
 				break
 			end
@@ -48,35 +66,33 @@ local useInputStyles = makeStyles(function(theme, _param)
 		defaultStyles.ZIndex = 10000
 		return defaultStyles
 	end
+	local makeShellStyles = function()
+		local shell = {
+			Size = UDim2.new(1, 0, 0, fieldHeight),
+			Position = UDim2.new(0, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 11000,
+		}
+		if variant == "filled" then
+			shell.BackgroundColor3 = theme.palette.surface.input
+			shell.BackgroundTransparency = 0
+		elseif variant == "outlined" then
+			shell.BackgroundColor3 = theme.palette.surface.input
+			shell.BackgroundTransparency = 0.35
+		end
+		return shell
+	end
 	local makeBoxStyles = function()
 		local defaultStyles = {}
-		defaultStyles.BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
+		defaultStyles.BackgroundTransparency = 1
+		defaultStyles.BorderSizePixel = 0
 		defaultStyles.PlaceholderColor3 = theme.palette.text.secondary
-		defaultStyles.Position = UDim2.new(0, 0, 0, 0)
-		defaultStyles.Size = UDim2.new(1, 0, 0, theme.spacing.calc(2))
-		repeat
-			if variant == "filled" then
-				defaultStyles.BackgroundTransparency = 0
-				defaultStyles.BorderSizePixel = 0
-				break
-			end
-			if variant == "outlined" then
-				defaultStyles.TextColor3 = theme.palette.text.primary
-				defaultStyles.BackgroundTransparency = 1
-				defaultStyles.BorderSizePixel = theme.options.constants.borders.default
-				break
-			end
-			if variant == "standard" then
-				defaultStyles.TextColor3 = theme.palette.text.primary
-				defaultStyles.BackgroundTransparency = 1
-				defaultStyles.BorderSizePixel = 0
-				break
-			end
-			defaultStyles.BackgroundTransparency = 0
-			defaultStyles.BorderSizePixel = 0
-			break
-		until true
+		defaultStyles.TextColor3 = theme.palette.text.primary
+		defaultStyles.Position = UDim2.new(0, insets.left, 0, 0)
+		defaultStyles.Size = UDim2.new(1, -(insets.left + insets.right), 1, 0)
 		defaultStyles.TextXAlignment = Enum.TextXAlignment.Left
+		defaultStyles.TextTruncate = Enum.TextTruncate.AtEnd
 		defaultStyles.ClearTextOnFocus = clearsTextOnFocus
 		defaultStyles.ZIndex = 12000
 		return defaultStyles
@@ -85,15 +101,9 @@ local useInputStyles = makeStyles(function(theme, _param)
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
 		defaultStyles.BorderSizePixel = 0
-		-- Center in root
 		defaultStyles.Position = UDim2.new(0.5, 0, 0.5, 0)
 		defaultStyles.AnchorPoint = Vector2.new(0.5, 0.5)
-		-- Margin controls vertical spacing around the input component
 		repeat
-			if margin == "none" then
-				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
-				break
-			end
 			if margin == "dense" then
 				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(2), 1, -theme.padding.calc(2))
 				break
@@ -102,20 +112,33 @@ local useInputStyles = makeStyles(function(theme, _param)
 				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4))
 				break
 			end
-			defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
+			defaultStyles.Size = UDim2.new(1, 0, 1, 0)
 			break
 		until true
 		defaultStyles.ZIndex = 11000
 		return defaultStyles
 	end
+	local slot = function(side)
+		return {
+			Size = UDim2.new(0, icon, 0, icon),
+			Position = UDim2.new(if side == "start" then 0 else 1, if side == "start" then gap else -gap, 0.5, 0),
+			AnchorPoint = Vector2.new(if side == "start" then 0 else 1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 13000,
+		}
+	end
 	return createStyles({
 		root = makeRootStyles(),
 		font = {
-			TextSize = theme.typography.fontSizes.button,
+			TextSize = metrics.font,
 			Font = theme.typography.fontFamilies.default,
 		},
 		margin = makeMarginStyles(),
+		shell = makeShellStyles(),
 		box = makeBoxStyles(),
+		startSlot = slot("start"),
+		endSlot = slot("end"),
 		helper = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			Position = UDim2.new(0, 0, 1, 0),
@@ -127,25 +150,24 @@ local useInputStyles = makeStyles(function(theme, _param)
 			ZIndex = 11000,
 		},
 		errorColorFrame = {
-			BackgroundColor3 = theme.palette.error.main,
-			BorderColor3 = theme.palette.error.main,
+			BackgroundColor3 = theme.palette.status.error.main,
+			BorderColor3 = theme.palette.status.error.main,
 		},
 		errorColorText = {
-			TextColor3 = theme.palette.error.main,
-			BackgroundColor3 = theme.palette.error.main,
-			BorderColor3 = theme.palette.error.main,
+			TextColor3 = theme.palette.status.error.main,
 		},
 		divider = {
-			Position = UDim2.new(0, 0, 0, theme.spacing.calc(2)),
-			BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
+			Position = UDim2.new(0, 0, 0, fieldHeight),
+			BackgroundColor3 = accent,
 			ZIndex = 11000,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
-			Transparency = 0,
+			Color = if hasError then theme.palette.status.error.main elseif focused then focusAccent else accent,
+			Transparency = if focused or hasError then 0 else 0.45,
+			Thickness = if focused then 1.5 else 1,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 	})

package/out/ui/packages/input/components/inputDraft.d.ts

@@ -0,0 +1 @@
+export declare function syncInputDraft(focused: boolean, text: string | undefined, draft: string): string;

package/out/ui/packages/input/components/inputDraft.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local function syncInputDraft(focused, text, draft)
+	local _result
+	if focused then
+		_result = draft
+	else
+		local _condition = text
+		if _condition == nil then
+			_condition = ""
+		end
+		_result = _condition
+	end
+	return _result
+end
+return {
+	syncInputDraft = syncInputDraft,
+}

package/out/ui/packages/input/components/inputInsets.d.ts

@@ -0,0 +1,4 @@
+export declare function inputInsets(hasStart: boolean, hasEnd: boolean, icon: number, gap: number): {
+    left: number;
+    right: number;
+};

package/out/ui/packages/input/components/inputInsets.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function inputInsets(hasStart, hasEnd, icon, gap)
+	return {
+		left = gap + (if hasStart then icon + gap else 0),
+		right = gap + (if hasEnd then icon + gap else 0),
+	}
+end
+return {
+	inputInsets = inputInsets,
+}

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

@@ -2,9 +2,9 @@
 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 makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useGridStyles = makeStyles(function(_, props)
+local useGridStyles = componentStyles("Grid", function(_, props)
 	return createStyles({
 		baseGrid = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -59,6 +59,7 @@ local function Grid(props)
 		verticalAlignment = Enum.VerticalAlignment.Top
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -89,6 +90,11 @@ local function Grid(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "GridLayout",
 	}

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

@@ -2,9 +2,9 @@
 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 makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useListStyles = makeStyles(function(_, props)
+local useListStyles = componentStyles("List", function(_, props)
 	return createStyles({
 		baseList = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -59,6 +59,7 @@ local function List(props)
 		verticalFlex = Enum.UIFlexAlignment.None
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -89,6 +90,11 @@ local function List(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "ListLayout",
 	}

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

@@ -0,0 +1,9 @@
+export interface ListItemProps {
+    text: string;
+    secondary?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onActivated?: () => void;
+}
+declare function ListItem(props: ListItemProps): JSX.Element;
+export default ListItem;

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

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
+local function ListItem(props)
+	local _binding = props
+	local text = _binding.text
+	local secondary = _binding.secondary
+	local selected = _binding.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _binding.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local onActivated = _binding.onActivated
+	local styles = useListItemStyles({
+		selected = selected,
+		disabled = disabled,
+	})
+	local _attributes = {
+		key = "ListItem",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	_attributes.Event = {
+		Activated = function()
+			if not disabled and onActivated ~= nil then
+				onActivated()
+			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.list)
+	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))
+	else
+		_result = nil
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _result)
+end
+local default = ListItem
+return {
+	default = default,
+}