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

package/out/ui/packages/imageList/components/ImageList.d.ts

@@ -2,12 +2,16 @@ import { CustomizedProps } from "../../../../theme/index";
 export interface ImageListItem {
     src: string;
     title?: string;
+    color?: Color3;
+    aspect?: number;
 }
 export interface ImageListProps {
     items: ImageListItem[];
     cols?: number;
     gap?: number;
     itemSize?: number;
+    aspect?: number;
+    selected?: ReadonlyArray<number>;
     onItemActivated?: (index: number) => void;
 }
 declare function ImageList(props: CustomizedProps<Frame, ImageListProps>): JSX.Element;

package/out/ui/packages/imageList/components/ImageList.luau

@@ -1,8 +1,15 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+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 imageListTitle = TS.import(script, script.Parent, "imageListLayout").imageListTitle
+local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCell = _imageListLayout.imageListCell
+local imageListItemAspect = _imageListLayout.imageListItemAspect
+local imageListSelected = _imageListLayout.imageListSelected
+local imageListTitle = _imageListLayout.imageListTitle
+local imageListTitleWrap = _imageListLayout.imageListTitleWrap
 local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
 local function ImageList(props)
 	local _binding = props
@@ -10,41 +17,64 @@ local function ImageList(props)
 	local cols = _binding.cols
 	local gap = _binding.gap
 	local itemSize = _binding.itemSize
+	local aspect = _binding.aspect
+	local selected = _binding.selected
 	local onItemActivated = _binding.onItemActivated
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useImageListStyles({
 		cols = cols,
 		gap = gap,
 		itemSize = itemSize,
+		aspect = aspect,
 	})
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = 12
+	end
+	local textSize = _condition
+	local pad = theme.spacing.calc(0.5) * 2
+	local bar = theme.spacing.calc(2.5)
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ImageList"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "ImageList"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.grid)
+	local _attributes_1 = table.clone(styles.flow)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uigridlayout", _attributes_1)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
 	local _callback = function(item, index)
 		local title = imageListTitle(item.title)
+		local picked = imageListSelected(selected, index)
+		local cell = imageListCell(itemSize, imageListItemAspect(item.aspect, aspect))
+		local textWidth = if title ~= nil then TextService:GetTextSize(title, textSize, font, Vector2.new(10000, 100)).X else 0
+		local wrap = title ~= nil and imageListTitleWrap(textWidth, cell.width - pad)
 		local _attributes_2 = {
 			key = `Tile-{index}`,
 		}
 		for _k, _v in styles.tile do
 			_attributes_2[_k] = _v
 		end
+		_attributes_2.Size = UDim2.fromOffset(cell.width, cell.height)
+		for _k, _v in (if item.color ~= nil then {
+			BackgroundColor3 = item.color,
+		} else {}) do
+			_attributes_2[_k] = _v
+		end
 		_attributes_2.LayoutOrder = index
 		_attributes_2.Event = {
 			Activated = function()
@@ -58,6 +88,12 @@ local function ImageList(props)
 		local _attributes_3 = table.clone(styles.corner)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uicorner", _attributes_3)
+		local _condition_2 = picked
+		if _condition_2 then
+			local _attributes_4 = table.clone(styles.selected)
+			setmetatable(_attributes_4, nil)
+			_condition_2 = React.createElement("uistroke", _attributes_4)
+		end
 		local _attributes_4 = {
 			key = "Image",
 		}
@@ -66,8 +102,8 @@ local function ImageList(props)
 		end
 		_attributes_4.Image = item.src
 		local _exp_2 = React.createElement("imagelabel", _attributes_4)
-		local _condition_1 = title ~= nil
-		if _condition_1 then
+		local _condition_3 = title ~= nil
+		if _condition_3 then
 			local _attributes_5 = {
 				key = "Title",
 			}
@@ -75,11 +111,21 @@ local function ImageList(props)
 				_attributes_5[_k] = _v
 			end
 			_attributes_5.Text = title
+			for _k, _v in (if wrap then {
+				AnchorPoint = Vector2.new(0, 1),
+				Position = UDim2.new(0, 0, 1, 0),
+				Size = UDim2.new(1, 0, 0, bar),
+				AutomaticSize = Enum.AutomaticSize.Y,
+				TextWrapped = true,
+				TextTruncate = Enum.TextTruncate.None,
+			} else {}) do
+				_attributes_5[_k] = _v
+			end
 			local _attributes_6 = table.clone(styles.titlePad)
 			setmetatable(_attributes_6, nil)
-			_condition_1 = (React.createElement("textlabel", _attributes_5, React.createElement("uipadding", _attributes_6)))
+			_condition_3 = (React.createElement("textlabel", _attributes_5, React.createElement("uipadding", _attributes_6)))
 		end
-		return React.createElement("imagebutton", _attributes_2, _exp_1, _exp_2, _condition_1)
+		return React.createElement("imagebutton", _attributes_2, _exp_1, _condition_2, _exp_2, _condition_3)
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)

package/out/ui/packages/imageList/components/ImageList.styles.d.ts

@@ -2,5 +2,6 @@ declare const useImageListStyles: (props: {
     cols?: number;
     gap?: number;
     itemSize?: number;
+    aspect?: number;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useImageListStyles;

package/out/ui/packages/imageList/components/ImageList.styles.luau

@@ -5,40 +5,46 @@ local Common = _theme.Common
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCell = _imageListLayout.imageListCell
 local imageListCols = _imageListLayout.imageListCols
 local imageListGap = _imageListLayout.imageListGap
-local imageListItemSize = _imageListLayout.imageListItemSize
 local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 	local cols = _param.cols
 	local gap = _param.gap
 	local itemSize = _param.itemSize
-	local size = imageListItemSize(itemSize)
+	local aspect = _param.aspect
+	local columns = imageListCols(cols)
+	local cell = imageListCell(itemSize, aspect)
 	local pad = theme.spacing.calc(imageListGap(gap))
 	local bar = theme.spacing.calc(2.5)
+	local span = columns * cell.width + math.max(0, columns - 1) * pad
 	return createStyles({
 		root = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.fromOffset(span, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
-		grid = {
-			CellSize = UDim2.fromOffset(size, size),
-			CellPadding = UDim2.fromOffset(pad, pad),
+		flow = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			FillDirectionMaxCells = imageListCols(cols),
+			Wraps = true,
+			Padding = UDim.new(0, pad),
 			SortOrder = Enum.SortOrder.LayoutOrder,
-			StartCorner = Enum.StartCorner.TopLeft,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
 			VerticalAlignment = Enum.VerticalAlignment.Top,
 		},
 		tile = {
-			Size = UDim2.fromOffset(size, size),
+			Size = UDim2.fromOffset(cell.width, cell.height),
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			ClipsDescendants = true,
 		},
+		selected = {
+			Color = theme.palette.primary.main,
+			Thickness = 2,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},

package/out/ui/packages/imageList/components/imageListLayout.d.ts

@@ -1,4 +1,14 @@
 export declare function imageListCols(cols?: number): number;
 export declare function imageListGap(gap?: number): number;
 export declare function imageListItemSize(itemSize?: number): number;
+export declare function imageListAspect(aspect?: number): number;
+/** Item ratio wins. The list ratio is used when the item does not set one. */
+export declare function imageListItemAspect(item?: number, list?: number): number;
+export declare function imageListCell(itemSize?: number, aspect?: number): {
+    width: number;
+    height: number;
+};
+export declare function imageListSelected(selected: ReadonlyArray<number> | undefined, index: number): boolean;
 export declare function imageListTitle(title?: string): string | undefined;
+/** A title wider than the tile wraps. A short title stays one line. */
+export declare function imageListTitleWrap(textWidth: number, box: number): boolean;

package/out/ui/packages/imageList/components/imageListLayout.luau

@@ -17,15 +17,59 @@ local function imageListItemSize(itemSize)
 	end
 	return math.floor(itemSize)
 end
+local function imageListAspect(aspect)
+	if aspect == nil or aspect <= 0 then
+		return 1
+	end
+	return aspect
+end
+--* Item ratio wins. The list ratio is used when the item does not set one. 
+local function imageListItemAspect(item, list)
+	if item ~= nil and item > 0 then
+		return item
+	end
+	return imageListAspect(list)
+end
+local function imageListCell(itemSize, aspect)
+	local width = imageListItemSize(itemSize)
+	local height = math.max(1, math.floor(width / imageListAspect(aspect)))
+	return {
+		width = width,
+		height = height,
+	}
+end
+local function imageListSelected(selected, index)
+	if selected == nil then
+		return false
+	end
+	for _, value in selected do
+		if value == index then
+			return true
+		end
+	end
+	return false
+end
 local function imageListTitle(title)
 	if title == nil or #title == 0 then
 		return nil
 	end
 	return title
 end
+--* A title wider than the tile wraps. A short title stays one line. 
+local function imageListTitleWrap(textWidth, box)
+	if box <= 0 then
+		return false
+	end
+	return textWidth > box
+end
 return {
 	imageListCols = imageListCols,
 	imageListGap = imageListGap,
 	imageListItemSize = imageListItemSize,
+	imageListAspect = imageListAspect,
+	imageListItemAspect = imageListItemAspect,
+	imageListCell = imageListCell,
+	imageListSelected = imageListSelected,
 	imageListTitle = imageListTitle,
+	imageListTitleWrap = imageListTitleWrap,
 }

package/out/ui/packages/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./circularProgress/index";
+export * from "./cover/index";
 export * from "./skeleton/index";
 export * from "./divider/index";
 export * from "./errorBoundary/index";
@@ -11,12 +12,17 @@ export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./scroll/index";
+export * from "./reorder/index";
 export * from "./shadow/index";
 export * from "./sidebar/index";
 export * from "./toast/index";
 export * from "./treeView/index";
 export * from "./typography/index";
+export * from "./text/index";
+export * from "./weekGrid/index";
 export * from "./button/index";
+export * from "./buttonGroup/index";
+export * from "./copyButton/index";
 export * from "./checkbox/index";
 export * from "./colorPicker/index";
 export * from "./fontEditor/index";
@@ -24,6 +30,7 @@ export * from "./loadingStroke/index";
 export * from "./numberInput/index";
 export * from "./numberRangeEditor/index";
 export * from "./dateRange/index";
+export * from "./timeField/index";
 export * from "./sparkline/index";
 export * from "./rectEditor/index";
 export * from "./rayEditor/index";
@@ -33,6 +40,7 @@ export * from "./vectorEditor/index";
 export * from "./cframeEditor/index";
 export * from "./enumPicker/index";
 export * from "./popup/index";
+export * from "./popover/index";
 export * from "./modal/index";
 export * from "./backdrop/index";
 export * from "./dialog/index";
@@ -42,13 +50,17 @@ export * from "./chip/index";
 export * from "./badge/index";
 export * from "./brickColorPicker/index";
 export * from "./avatar/index";
+export * from "./avatarGroup/index";
 export * from "./assetField/index";
 export * from "./gradientEditor/index";
 export * from "./drawer/index";
 export * from "./breadcrumbs/index";
 export * from "./pagination/index";
+export * from "./pager/index";
 export * from "./stepper/index";
+export * from "./timeline/index";
 export * from "./accordion/index";
+export * from "./collapse/index";
 export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";

package/out/ui/packages/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "circularProgress") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "cover") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "skeleton") or {} do
 	exports[_k] = _v
 end
@@ -40,6 +43,9 @@ end
 for _k, _v in TS.import(script, script, "scroll") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "reorder") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "shadow") or {} do
 	exports[_k] = _v
 end
@@ -55,9 +61,21 @@ end
 for _k, _v in TS.import(script, script, "typography") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "text") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "weekGrid") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "button") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "buttonGroup") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "copyButton") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "checkbox") or {} do
 	exports[_k] = _v
 end
@@ -79,6 +97,9 @@ end
 for _k, _v in TS.import(script, script, "dateRange") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "timeField") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "sparkline") or {} do
 	exports[_k] = _v
 end
@@ -106,6 +127,9 @@ end
 for _k, _v in TS.import(script, script, "popup") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "popover") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "modal") or {} do
 	exports[_k] = _v
 end
@@ -133,6 +157,9 @@ end
 for _k, _v in TS.import(script, script, "avatar") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "avatarGroup") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "assetField") or {} do
 	exports[_k] = _v
 end
@@ -148,12 +175,21 @@ end
 for _k, _v in TS.import(script, script, "pagination") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "pager") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "stepper") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "timeline") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "accordion") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "collapse") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "snackbar") or {} do
 	exports[_k] = _v
 end

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

@@ -17,6 +17,10 @@ export interface InputProps {
     rounded?: boolean;
     clearsTextOnFocus?: boolean;
     size?: ControlSize;
+    multiline?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    maxLength?: number;
     reducedMotion?: boolean;
     startAdornment?: React.Element;
     endAdornment?: React.Element;

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

@@ -15,6 +15,7 @@ local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divide
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
+local clampText = TS.import(script, script.Parent, "clampText").clampText
 local syncInputDraft = TS.import(script, script.Parent, "inputDraft").syncInputDraft
 local function adornmentAlign()
 	return React.createElement("uilistlayout", {
@@ -54,6 +55,11 @@ local function Input(props)
 		rounded = true
 	end
 	local size = _binding.size
+	local multiline = _binding.multiline
+	if multiline == nil then
+		multiline = false
+	end
+	local maxLength = _binding.maxLength
 	local reducedMotion = _binding.reducedMotion
 	local startAdornment = _binding.startAdornment
 	local endAdornment = _binding.endAdornment
@@ -74,6 +80,7 @@ local function Input(props)
 	end
 	local draft, setDraft = useState(_condition)
 	local focused, setFocused = useState(false)
+	local contentHeight, setContentHeight = useState(0)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local active = canActivate(disabled, loading)
@@ -82,6 +89,7 @@ local function Input(props)
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
 	_object.focused = focused
+	_object.contentHeight = contentHeight
 	local _binding_2 = useInputStyles(_object)
 	local root = _binding_2.root
 	local font = _binding_2.font
@@ -98,9 +106,9 @@ local function Input(props)
 	local stroke = _binding_2.stroke
 	useEffect(function()
 		setDraft(function(current)
-			return syncInputDraft(focusedRef.current, text, current)
+			return clampText(syncInputDraft(focusedRef.current, text, current), maxLength)
 		end)
-	end, { text })
+	end, { text, maxLength })
 	local showStroke = variant == "outlined" or variant == "filled"
 	local showCorner = rounded
 	local _attributes = {
@@ -167,6 +175,7 @@ local function Input(props)
 	_attributes_3.TextEditable = editable
 	_attributes_3.Text = draft
 	_attributes_3.PlaceholderText = placeholder
+	_attributes_3.MultiLine = multiline
 	for _k, _v in cx(hasError and errorColorText) do
 		_attributes_3[_k] = _v
 	end
@@ -175,9 +184,19 @@ local function Input(props)
 			if not editable then
 				return nil
 			end
-			setDraft(rbx.Text)
+			local capped = clampText(rbx.Text, maxLength)
+			if rbx.Text ~= capped then
+				rbx.Text = capped
+				return nil
+			end
+			setDraft(capped)
 			if focusedRef.current and onInput then
-				onInput(rbx.Text)
+				onInput(capped)
+			end
+		end,
+		TextBounds = function(rbx)
+			if multiline then
+				setContentHeight(rbx.TextBounds.Y)
 			end
 		end,
 	}
@@ -194,20 +213,20 @@ local function Input(props)
 			end
 		end,
 		ReturnPressedFromOnScreenKeyboard = function(rbx)
-			if not editable or entered.current or not onEnterPressed then
+			if not editable or multiline or entered.current or not onEnterPressed then
 				return nil
 			end
 			entered.current = true
-			onEnterPressed(rbx.Text)
+			onEnterPressed(clampText(rbx.Text, maxLength))
 		end,
 		FocusLost = function(rbx, enterPressed)
 			focusedRef.current = false
 			setFocused(false)
-			local committed = rbx.Text
+			local committed = clampText(rbx.Text, maxLength)
 			if editable and onTextChanged then
 				onTextChanged(committed)
 			end
-			if editable and enterPressed and not entered.current and onEnterPressed then
+			if editable and not multiline and enterPressed and not entered.current and onEnterPressed then
 				onEnterPressed(committed)
 			end
 			entered.current = false
@@ -218,7 +237,7 @@ local function Input(props)
 			if _condition_5 == nil then
 				_condition_5 = ""
 			end
-			setDraft(_condition_5)
+			setDraft(clampText(_condition_5, maxLength))
 		end,
 	}
 	local _exp = React.createElement("textbox", _attributes_3)
@@ -250,6 +269,7 @@ local function Input(props)
 	local _exp_1 = React.createElement("frame", _attributes_2, _condition_2, _condition_3, _condition_4, _exp, _condition_5, _condition_6)
 	local _exp_2 = variant == "standard" and (React.createElement(Divider, {
 		padding = 0,
+		weight = if focused then 2 else nil,
 		orientation = Orientations.Horizontal,
 		className = cx(divider, hasError and errorColorFrame),
 	}))

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

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

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

@@ -4,7 +4,9 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
 local inputInsets = TS.import(script, script.Parent, "inputInsets").inputInsets
+local multilineHeight = TS.import(script, script.Parent, "multilineHeight").multilineHeight
 local useInputStyles = componentStyles("Input", function(theme, _param)
 	local color = _param.color
 	if color == nil then
@@ -42,15 +44,31 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		hasError = false
 	end
 	local size = _param.size
+	local multiline = _param.multiline
+	if multiline == nil then
+		multiline = false
+	end
+	local minRows = _param.minRows
+	if minRows == nil then
+		minRows = 2
+	end
+	local maxRows = _param.maxRows
+	if maxRows == nil then
+		maxRows = 5
+	end
+	local contentHeight = _param.contentHeight
+	if contentHeight == nil then
+		contentHeight = 0
+	end
 	local metrics = controlMetrics(theme.density, size)
 	local hasStart = startAdornment ~= nil
 	local hasEnd = endAdornment ~= nil or loading
 	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 verticalPad = theme.padding.calc(1)
+	local fieldHeight = if multiline then multilineHeight(contentHeight, metrics.font, minRows, maxRows, verticalPad) else metrics.height + (if variant == "standard" then 0 else verticalPad)
 	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
@@ -96,9 +114,15 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		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.TextYAlignment = if multiline then Enum.TextYAlignment.Top else Enum.TextYAlignment.Center
+		defaultStyles.TextWrapped = multiline
+		defaultStyles.TextTruncate = if multiline then Enum.TextTruncate.None else Enum.TextTruncate.AtEnd
 		defaultStyles.ClearTextOnFocus = clearsTextOnFocus
 		defaultStyles.ZIndex = 12000
+		if multiline then
+			defaultStyles.Position = UDim2.new(0, insets.left, 0, verticalPad)
+			defaultStyles.Size = UDim2.new(1, -(insets.left + insets.right), 1, -verticalPad * 2)
+		end
 		return defaultStyles
 	end
 	local makeMarginStyles = function()
@@ -132,7 +156,7 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 			ZIndex = 13000,
 		}
 	end
-	return createStyles({
+	local _object = {
 		root = makeRootStyles(),
 		font = {
 			TextSize = metrics.font,
@@ -162,19 +186,25 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		},
 		divider = {
 			Position = UDim2.new(0, 0, 0, fieldHeight),
-			BackgroundColor3 = accent,
+			BackgroundColor3 = if focused then theme.palette.focus else accent,
 			ZIndex = 11000,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
-		stroke = {
-			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,
-		},
-	})
+	}
+	local _left = "stroke"
+	local _object_1 = {
+		Color = if hasError then theme.palette.status.error.main else accent,
+		Transparency = if focused or hasError then 0 else 0.45,
+		Thickness = 1,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	for _k, _v in (if focused then focusRing(if hasError then theme.palette.status.error.main else theme.palette.focus) else {}) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	return createStyles(_object)
 end)
 local default = useInputStyles
 return {