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

package/out/ui/packages/markdown/components/Markdown.luau

@@ -3,9 +3,12 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local Link = TS.import(script, script.Parent.Parent.Parent, "link").Link
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local _parseMarkdown = TS.import(script, script.Parent.Parent, "parseMarkdown")
+local inlinePieces = _parseMarkdown.inlinePieces
 local inlinesToRichText = _parseMarkdown.inlinesToRichText
+local markdownLinkPayload = _parseMarkdown.markdownLinkPayload
 local parseMarkdown = _parseMarkdown.parseMarkdown
 local useMarkdownStyles = TS.import(script, script.Parent, "Markdown.styles").default
 local function headingVariant(level)
@@ -58,7 +61,88 @@ local function richLabel(key, styles, inlines, variant, order)
 	_attributes.Font = if variant ~= nil and variant ~= "body" then Enum.Font.SourceSansBold else Enum.Font.SourceSans
 	return React.createElement("textlabel", _attributes)
 end
-local function renderBlock(block, index, styles)
+local function inlineHasLink(inlines)
+	for _, part in inlines do
+		if markdownLinkPayload(part) ~= nil then
+			return true
+		end
+	end
+	return false
+end
+local function inlineFlow(key, styles, inlines, variant, order, onLink)
+	if not inlineHasLink(inlines) then
+		return richLabel(key, styles, inlines, variant, order)
+	end
+	local pieces = inlinePieces(inlines)
+	local textSize = textSizeFor(variant)
+	local font = if variant ~= nil and variant ~= "body" then Enum.Font.SourceSansBold else Enum.Font.SourceSans
+	local _attributes = {
+		key = key,
+	}
+	for _k, _v in styles.flow do
+		_attributes[_k] = _v
+	end
+	_attributes.LayoutOrder = order
+	local _attributes_1 = table.clone(styles.flowLayout)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#pieces)
+	local _callback = function(piece, index)
+		if piece.kind == "break" then
+			return React.createElement("frame", {
+				key = `br-{index}`,
+				LayoutOrder = index,
+				Size = UDim2.new(1, 0, 0, 0),
+				BackgroundTransparency = 1,
+				BorderSizePixel = 0,
+			})
+		end
+		if piece.kind == "link" then
+			local payload = markdownLinkPayload({
+				kind = "link",
+				text = piece.text,
+				href = piece.href,
+			})
+			if payload == nil then
+				return nil
+			end
+			return React.createElement(Link, {
+				key = `ln-{index}`,
+				text = payload.text,
+				sx = {
+					TextSize = textSize,
+					Font = font,
+					LayoutOrder = index,
+				},
+				onActivated = function()
+					local _result = onLink
+					if _result ~= nil then
+						_result = _result(payload)
+					end
+					return _result
+				end,
+			})
+		end
+		local _attributes_2 = {
+			key = `wd-{index}`,
+		}
+		for _k, _v in styles.word do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Text = piece.text
+		_attributes_2.TextSize = textSize
+		_attributes_2.Font = font
+		return React.createElement("textlabel", _attributes_2)
+	end
+	for _k, _v in pieces do
+		_newValue[_k] = _callback(_v, _k - 1, pieces)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local function renderBlock(block, index, styles, onLink)
 	if block.kind == "heading" then
 		local _attributes = {
 			key = `h-{index}`,
@@ -67,7 +151,7 @@ local function renderBlock(block, index, styles)
 			_attributes[_k] = _v
 		end
 		_attributes.LayoutOrder = index
-		return React.createElement("frame", _attributes, richLabel("Text", styles, block.inlines, headingVariant(block.level)))
+		return React.createElement("frame", _attributes, inlineFlow("Text", styles, block.inlines, headingVariant(block.level), nil, onLink))
 	end
 	if block.kind == "paragraph" then
 		local _attributes = {
@@ -77,7 +161,7 @@ local function renderBlock(block, index, styles)
 			_attributes[_k] = _v
 		end
 		_attributes.LayoutOrder = index
-		return React.createElement("frame", _attributes, richLabel("Text", styles, block.inlines, "body"))
+		return React.createElement("frame", _attributes, inlineFlow("Text", styles, block.inlines, "body", nil, onLink))
 	end
 	if block.kind == "code" then
 		local _attributes = {
@@ -132,7 +216,7 @@ local function renderBlock(block, index, styles)
 		local _exp_1 = React.createElement("frame", _attributes_1)
 		local _attributes_2 = table.clone(styles.quotePad)
 		setmetatable(_attributes_2, nil)
-		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("uipadding", _attributes_2), richLabel("Text", styles, block.inlines, "body"))
+		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("uipadding", _attributes_2), inlineFlow("Text", styles, block.inlines, "body", nil, onLink))
 	end
 	if block.kind == "list" then
 		local _attributes = {
@@ -167,7 +251,7 @@ local function renderBlock(block, index, styles)
 				_attributes_1[_k] = _v
 			end
 			_attributes_1.LayoutOrder = itemIndex
-			return React.createElement("frame", _attributes_1, richLabel("Text", styles, labeled, "body"))
+			return React.createElement("frame", _attributes_1, inlineFlow("Text", styles, labeled, "body", nil, onLink))
 		end
 		for _k, _v in _exp_1 do
 			_newValue[_k] = _callback(_v, _k - 1, _exp_1)
@@ -183,6 +267,7 @@ local function Markdown(props)
 	if value == nil then
 		value = ""
 	end
+	local onLink = _binding.onLink
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -207,7 +292,7 @@ local function Markdown(props)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#blocks)
 	local _callback = function(block, index)
-		return renderBlock(block, index, styles)
+		return renderBlock(block, index, styles, onLink)
 	end
 	for _k, _v in blocks do
 		_newValue[_k] = _callback(_v, _k - 1, blocks)

package/out/ui/packages/markdown/components/Markdown.styles.luau

@@ -93,6 +93,31 @@ local useMarkdownStyles = componentStyles("Markdown", function(theme)
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 	}
+	_object.flow = {
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.flowLayout = {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Left,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Wraps = true,
+		Padding = UDim.new(0, 4),
+	}
+	_object.word = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.body,
+		TextColor3 = theme.palette.text.primary,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		RichText = true,
+	}
 	return createStyles(_object)
 end)
 local default = useMarkdownStyles

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

@@ -3,6 +3,6 @@ export type { MarkdownProps } from "./components/Markdown";
 export { default as MarkdownEditor } from "./components/MarkdownEditor";
 export type { MarkdownEditorProps } from "./components/MarkdownEditor";
 export type { MarkdownEditorMode } from "./components/MarkdownEditor.styles";
-export { parseMarkdown, inlinesToPlain, inlinesToRichText } from "./parseMarkdown";
-export type { MdBlock, MdInline } from "./parseMarkdown";
+export { parseMarkdown, inlinesToPlain, inlinesToRichText, inlinePieces, markdownLinkPayload } from "./parseMarkdown";
+export type { MdBlock, MdInline, MdPiece, MarkdownLinkPayload } from "./parseMarkdown";
 export { htmlToMarkdown } from "./htmlToMarkdown";

package/out/ui/packages/markdown/init.luau

@@ -7,5 +7,7 @@ local _parseMarkdown = TS.import(script, script, "parseMarkdown")
 exports.parseMarkdown = _parseMarkdown.parseMarkdown
 exports.inlinesToPlain = _parseMarkdown.inlinesToPlain
 exports.inlinesToRichText = _parseMarkdown.inlinesToRichText
+exports.inlinePieces = _parseMarkdown.inlinePieces
+exports.markdownLinkPayload = _parseMarkdown.markdownLinkPayload
 exports.htmlToMarkdown = TS.import(script, script, "htmlToMarkdown").htmlToMarkdown
 return exports

package/out/ui/packages/markdown/parseMarkdown.d.ts

@@ -38,5 +38,25 @@ export type MdBlock = {
 /** Small markdown subset → blocks. Unsupported syntax stays plain text. */
 export declare function parseMarkdown(source: string): MdBlock[];
 export declare function inlinesToPlain(inlines: MdInline[]): string;
-/** Turn inline nodes into Roblox RichText. Links become colored label + (url). */
+/** Turn inline nodes into Roblox RichText. Links stay the label only. */
 export declare function inlinesToRichText(inlines: MdInline[]): string;
+export interface MarkdownLinkPayload {
+    text: string;
+    href: string;
+}
+/** Click payload for a link inline. Other inlines are not activatable. */
+export declare function markdownLinkPayload(inline: MdInline): MarkdownLinkPayload | undefined;
+export type MdPiece = {
+    kind: "word";
+    text: string;
+} | {
+    kind: "link";
+    text: string;
+    href: string;
+} | {
+    kind: "break";
+};
+/** Split a line into words and link payloads so a link can take a click. */
+export declare function inlinePieces(inlines: MdInline[]): MdPiece[];
+/** Line index of each piece. A piece wraps only when it does not fit beside the previous one. */
+export declare function inlineLines(pieces: MdPiece[], maxWidth: number, gap?: number): number[];

package/out/ui/packages/markdown/parseMarkdown.luau

@@ -432,7 +432,7 @@ local function escapeRich(text)
 	end
 	return out
 end
---* Turn inline nodes into Roblox RichText. Links become colored label + (url). 
+--* Turn inline nodes into Roblox RichText. Links stay the label only. 
 local function inlinesToRichText(inlines)
 	local out = ""
 	for _, part in inlines do
@@ -447,13 +447,120 @@ local function inlinesToRichText(inlines)
 		elseif part.kind == "code" then
 			out = `{out}<font face="RobotoMono">{escapeRich(part.text)}</font>`
 		elseif part.kind == "link" then
-			out = `{out}<font color="#4C9AFF">{escapeRich(part.text)}</font> ({escapeRich(part.href)})`
+			out = `{out}<font color="#4C9AFF"><u>{escapeRich(part.text)}</u></font>`
 		end
 	end
 	return out
 end
+--* Click payload for a link inline. Other inlines are not activatable. 
+local function markdownLinkPayload(inline)
+	if inline.kind ~= "link" or #inline.text == 0 then
+		return nil
+	end
+	return {
+		text = inline.text,
+		href = inline.href,
+	}
+end
+local function richWord(kind, word)
+	local safe = escapeRich(word)
+	if kind == "bold" then
+		return `<b>{safe}</b>`
+	end
+	if kind == "italic" then
+		return `<i>{safe}</i>`
+	end
+	if kind == "code" then
+		return `<font face="RobotoMono">{safe}</font>`
+	end
+	return safe
+end
+--* Split a line into words and link payloads so a link can take a click. 
+local function inlinePieces(inlines)
+	local out = {}
+	for _, part in inlines do
+		local link = markdownLinkPayload(part)
+		if link ~= nil then
+			local _arg0 = {
+				kind = "link",
+				text = link.text,
+				href = link.href,
+			}
+			table.insert(out, _arg0)
+			continue
+		end
+		if part.kind == "link" then
+			continue
+		end
+		local word = ""
+		local flush = function()
+			if #word == 0 then
+				return nil
+			end
+			local _arg0 = {
+				kind = "word",
+				text = richWord(part.kind, word),
+			}
+			table.insert(out, _arg0)
+			word = ""
+		end
+		local source = part.text
+		for i = 1, #source do
+			local _i = i
+			local _i_1 = i
+			local ch = string.sub(source, _i, _i_1)
+			if ch == " " or ch == "\t" or ch == "\r" then
+				flush()
+				continue
+			end
+			if ch == "\n" then
+				flush()
+				table.insert(out, {
+					kind = "break",
+				})
+				continue
+			end
+			word = `{word}{ch}`
+		end
+		flush()
+	end
+	return out
+end
+--* Line index of each piece. A piece wraps only when it does not fit beside the previous one. 
+local function inlineLines(pieces, maxWidth, gap)
+	if gap == nil then
+		gap = 1
+	end
+	local lineOf = {}
+	local line = 0
+	local used = 0
+	for _, piece in pieces do
+		if piece.kind == "break" then
+			local _line = line
+			table.insert(lineOf, _line)
+			line += 1
+			used = 0
+			continue
+		end
+		local width = #piece.text
+		if used > 0 and used + gap + width > maxWidth then
+			line += 1
+			used = width
+		elseif used == 0 then
+			used = width
+		else
+			used += gap + width
+		end
+		local _line = line
+		table.insert(lineOf, _line)
+	end
+	return lineOf
+end
 return {
 	parseMarkdown = parseMarkdown,
 	inlinesToPlain = inlinesToPlain,
 	inlinesToRichText = inlinesToRichText,
+	markdownLinkPayload = markdownLinkPayload,
+	inlinePieces = inlinePieces,
+	inlineLines = inlineLines,
 }

package/out/ui/packages/menu/components/Menu.d.ts

@@ -1,9 +1,12 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
 export interface MenuItem {
     id: string;
     text: string;
+    icon?: Icons;
     disabled?: boolean;
+    tone?: "danger";
 }
 export interface MenuProps {
     anchor?: GuiObject;

package/out/ui/packages/menu/components/Menu.luau

@@ -1,13 +1,19 @@
 -- 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 Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
+local listItemInk = TS.import(script, script.Parent.Parent.Parent, "listItem", "components", "listItemInk").listItemInk
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
+local _menuIcon = TS.import(script, script.Parent, "menuIcon")
+local menuIcon = _menuIcon.menuIcon
+local menuRow = _menuIcon.menuRow
+local menuWidth = _menuIcon.menuWidth
 local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
-local ROW = 28
-local ROW_DENSE = 22
 local function Menu(props)
 	local _binding = props
 	local anchor = _binding.anchor
@@ -23,21 +29,52 @@ local function Menu(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useMenuStyles()
 	if not open then
 		return nil
 	end
 	local vacant = #items == 0
-	local row = if dense == true then ROW_DENSE else ROW
-	local height = if vacant then row else #items * row
+	-- ▼ ReadonlyArray.some ▼
+	local _result = false
+	local _callback = function(item)
+		return menuIcon(item.icon) ~= nil
+	end
+	for _k, _v in items do
+		if _callback(_v, _k - 1, items) then
+			_result = true
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.some ▲
+	local icons = _result
+	local row = menuRow(dense, icons)
+	local height = if vacant then menuRow(dense) else #items * row
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local _condition = (if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body)
+	if _condition == nil then
+		_condition = 14
+	end
+	local textSize = _condition
+	local widest = 0
+	for _, item in items do
+		local bounds = TextService:GetTextSize(item.text, textSize, font, Vector2.new(10000, 100))
+		if bounds.X > widest then
+			widest = bounds.X
+		end
+	end
+	local pad = theme.padding.calc(if dense == true then 1 else 2)
+	local floor = if anchor ~= nil then anchor.AbsoluteSize.X else 0
+	local width = if vacant then 0 else menuWidth(widest, icons, pad, floor)
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Surface"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Surface"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = styles.surface
 	_attributes.className = className
@@ -51,30 +88,39 @@ local function Menu(props)
 	local _attributes_3 = table.clone(styles.list)
 	setmetatable(_attributes_3, nil)
 	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
-	local _result
+	local _result_1
 	if vacant then
-		local _condition_1 = empty
-		if _condition_1 == nil then
+		local _condition_2 = empty
+		if _condition_2 == nil then
 			local _attributes_4 = {}
-			local _condition_2 = emptyText
-			if _condition_2 == nil then
-				_condition_2 = "No options"
+			local _condition_3 = emptyText
+			if _condition_3 == nil then
+				_condition_3 = "No options"
 			end
-			_attributes_4.text = _condition_2
+			_attributes_4.text = _condition_3
 			_attributes_4.height = row
-			_condition_1 = React.createElement(EmptyListHint, _attributes_4)
+			_condition_2 = React.createElement(EmptyListHint, _attributes_4)
 		end
-		_result = _condition_1
+		_result_1 = _condition_2
 	else
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue = table.create(#items)
-		local _callback = function(item)
+		local _callback_1 = function(item)
+			local glyph = menuIcon(item.icon)
+			local ink = listItemInk(item.tone, item.disabled)
+			local tint = if ink == "error" then theme.palette.status.error.main elseif ink == "disabled" then theme.palette.text.disabled else theme.palette.text.primary
 			return React.createElement(ListItem, {
 				key = item.id,
 				text = item.text,
 				disabled = item.disabled,
+				tone = item.tone,
 				dense = dense,
 				selected = item.id == selected,
+				leading = if glyph ~= nil then React.createElement(Icon, {
+					icon = glyph,
+					size = "sm",
+					tint = tint,
+				}) else nil,
 				onActivated = function()
 					if item.disabled == true then
 						return nil
@@ -85,16 +131,17 @@ local function Menu(props)
 			})
 		end
 		for _k, _v in items do
-			_newValue[_k] = _callback(_v, _k - 1, items)
+			_newValue[_k] = _callback_1(_v, _k - 1, items)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		_result = (React.createElement(React.Fragment, nil, _newValue))
+		_result_1 = (React.createElement(React.Fragment, nil, _newValue))
 	end
 	return React.createElement(Popup, {
 		anchor = anchor,
 		preferredHeight = height,
+		preferredWidth = width,
 		onDismiss = onClose,
-	}, React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result))
+	}, React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result_1))
 end
 local default = Menu
 return {

package/out/ui/packages/menu/components/menuIcon.d.ts

@@ -0,0 +1,6 @@
+/** An empty glyph stays off the row. */
+export declare function menuIcon(icon?: string): string | undefined;
+/** Icon rows need the leading slot. Plain rows stay the short menu height. */
+export declare function menuRow(dense?: boolean, icon?: boolean): 22 | 48 | 28 | 44;
+/** Grow past a narrow anchor so the label and glyph fit. Stay at least as wide as the anchor. */
+export declare function menuWidth(text: number, icon: boolean, pad: number, floor: number): number;

package/out/ui/packages/menu/components/menuIcon.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty glyph stays off the row. 
+local function menuIcon(icon)
+	if icon == nil or icon == "" then
+		return nil
+	end
+	return icon
+end
+--* Icon rows need the leading slot. Plain rows stay the short menu height. 
+local function menuRow(dense, icon)
+	if icon == true then
+		return if dense == true then 44 else 48
+	end
+	return if dense == true then 22 else 28
+end
+--* Grow past a narrow anchor so the label and glyph fit. Stay at least as wide as the anchor. 
+local function menuWidth(text, icon, pad, floor)
+	local lead = if icon then 48 else 0
+	local need = text + lead + pad
+	if need < 0 then
+		need = 0
+	end
+	if floor > need then
+		return floor
+	end
+	return need
+end
+return {
+	menuIcon = menuIcon,
+	menuRow = menuRow,
+	menuWidth = menuWidth,
+}

package/out/ui/packages/numberInput/components/NumberInput.d.ts

@@ -13,6 +13,7 @@ export interface NumberInputProps {
     width?: UDim;
     size?: ControlSize;
     reducedMotion?: boolean;
+    stepper?: boolean;
 }
 declare function NumberInput(props: CustomizedProps<Frame, NumberInputProps>): JSX.Element;
 export default NumberInput;

package/out/ui/packages/numberInput/components/NumberInput.luau

@@ -1,10 +1,38 @@
 -- 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 Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local _numberValue = TS.import(script, script.Parent, "numberValue")
 local formatNumber = _numberValue.formatNumber
 local parseNumberDraft = _numberValue.parseNumberDraft
+local stepNumber = _numberValue.stepNumber
+local function StepButton(props)
+	local _binding = useTheme()
+	local theme = _binding.theme
+	return React.createElement("textbutton", {
+		LayoutOrder = props.order,
+		Size = UDim2.fromOffset(28, 28),
+		BackgroundColor3 = theme.palette.surface.paper,
+		BackgroundTransparency = if props.enabled then 0 else 0.45,
+		BorderSizePixel = 0,
+		Text = props.text,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.body,
+		TextColor3 = if props.enabled then theme.palette.text.primary else theme.palette.text.secondary,
+		AutoButtonColor = props.enabled,
+		Active = props.enabled,
+		Event = {
+			Activated = function()
+				if props.enabled then
+					props.onClick()
+				end
+			end,
+		},
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}))
+end
 local function NumberInput(props)
 	local _binding = props
 	local value = _binding.value
@@ -20,10 +48,12 @@ local function NumberInput(props)
 	local width = _binding.width
 	local size = _binding.size
 	local reducedMotion = _binding.reducedMotion
+	local stepper = _binding.stepper
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local locked = disabled == true or readOnly == true
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -53,7 +83,43 @@ local function NumberInput(props)
 			onChange(committed)
 		end
 	end
-	return React.createElement(Input, _attributes)
+	local field = (React.createElement(Input, _attributes))
+	if stepper ~= true then
+		return field
+	end
+	local down = stepNumber(value, -1, min, max, step)
+	local up = stepNumber(value, 1, min, max, step)
+	return React.createElement("frame", {
+		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		Padding = UDim.new(0, 4),
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}), React.createElement(StepButton, {
+		text = "-",
+		order = 0,
+		enabled = not locked and down ~= nil,
+		onClick = function()
+			return down ~= nil and onChange(down)
+		end,
+	}), React.createElement("frame", {
+		LayoutOrder = 1,
+		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, field), React.createElement(StepButton, {
+		text = "+",
+		order = 2,
+		enabled = not locked and up ~= nil,
+		onClick = function()
+			return up ~= nil and onChange(up)
+		end,
+	}))
 end
 local default = NumberInput
 return {

package/out/ui/packages/numberInput/components/numberValue.d.ts

@@ -1,3 +1,5 @@
 export declare function commitNumber(value: number | undefined, min?: number, max?: number, step?: number): number | undefined;
 export declare function parseNumberDraft(text: string, min?: number, max?: number, step?: number): number | undefined;
+/** One step up or down. Undefined when the value would not change. */
+export declare function stepNumber(value: number, direction: number, min?: number, max?: number, step?: number): number | undefined;
 export declare function formatNumber(value: number, places?: number): string;