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

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -1,5 +1,6 @@
 export type SpeedDialDirection = "up" | "down" | "left" | "right";
 declare const useSpeedDialStyles: (props: {
     direction?: SpeedDialDirection;
+    labeled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -8,8 +8,12 @@ local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
 	if direction == nil then
 		direction = "up"
 	end
+	local labeled = _param.labeled
+	if labeled == nil then
+		labeled = false
+	end
 	local vertical = direction == "up" or direction == "down"
-	return createStyles({
+	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
@@ -18,12 +22,50 @@ local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
 		},
 		list = {
 			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
-			HorizontalAlignment = if direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
+			HorizontalAlignment = if vertical and labeled then Enum.HorizontalAlignment.Right elseif direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
 			VerticalAlignment = if direction == "up" then Enum.VerticalAlignment.Bottom elseif direction == "down" then Enum.VerticalAlignment.Top else Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 		},
-	})
+		action = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		actionRow = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+		},
+	}
+	local _left = "actionLabel"
+	local _object_1 = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundColor3 = theme.palette.surface.paper,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	_object_1[_left_1] = _condition
+	_object_1.TextColor3 = theme.palette.text.primary
+	_object[_left] = _object_1
+	_object.actionPad = {
+		PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+		PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
+		PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
+	}
+	_object.actionCorner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	return createStyles(_object)
 end)
 local default = useSpeedDialStyles
 return {

package/out/ui/packages/speedDial/components/speedDialLabel.d.ts

@@ -0,0 +1,4 @@
+/** An empty name stays off the action. */
+export declare function speedDialLabel(text?: string): string | undefined;
+/** The name sits beside the button, opposite the way the dial travels. */
+export declare function speedDialLabelFirst(direction: "up" | "down" | "left" | "right"): direction is "up" | "down" | "right";

package/out/ui/packages/speedDial/components/speedDialLabel.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty name stays off the action. 
+local function speedDialLabel(text)
+	if text == nil or text == "" then
+		return nil
+	end
+	return text
+end
+--* The name sits beside the button, opposite the way the dial travels. 
+local function speedDialLabelFirst(direction)
+	return direction ~= "left"
+end
+return {
+	speedDialLabel = speedDialLabel,
+	speedDialLabelFirst = speedDialLabelFirst,
+}

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

@@ -28,5 +28,6 @@ export interface StateCapture {
     density?: StateDensity;
     row?: boolean;
     marks?: boolean;
+    multiline?: boolean;
 }
 export declare const stateMatrix: StateCapture[];

package/out/ui/packages/stateMatrix.luau

@@ -146,6 +146,11 @@ local function controlsRows()
 		text = LONG,
 		width = NARROW,
 	})
+	pushPair(out, "Input", "multiline", {
+		text = "First line\nSecond line",
+		width = NARROW,
+		multiline = true,
+	})
 	pushPair(out, "Input", "sx", {
 		variant = "sx",
 	})
@@ -282,6 +287,10 @@ local function editorsRows()
 		value = "0,0,0",
 		disabled = true,
 	})
+	pushPair(out, "CFrameEditor", "narrow", {
+		value = "0,0,0",
+		width = 320,
+	})
 	pushPair(out, "CFrameEditor", "sx", {
 		value = "0,0,0",
 	})

package/out/ui/packages/stepper/components/Stepper.d.ts

@@ -3,6 +3,8 @@ export interface StepperProps {
     steps: string[];
     activeStep: number;
     orientation?: "horizontal" | "vertical";
+    errorStep?: number;
+    onStep?: (index: number) => void;
 }
 declare function Stepper(props: CustomizedProps<Frame, StepperProps>): JSX.Element;
 export default Stepper;

package/out/ui/packages/stepper/components/Stepper.luau

@@ -2,7 +2,9 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
-local stepState = TS.import(script, script.Parent, "stepState").stepState
+local _stepState = TS.import(script, script.Parent, "stepState")
+local stepPress = _stepState.stepPress
+local stepState = _stepState.stepState
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useStepperStyles = TS.import(script, script.Parent, "Stepper.styles").default
 local function Stepper(props)
@@ -13,6 +15,8 @@ local function Stepper(props)
 	if orientation == nil then
 		orientation = "horizontal"
 	end
+	local errorStep = _binding.errorStep
+	local onStep = _binding.onStep
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -37,17 +41,41 @@ local function Stepper(props)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#steps)
-	local _callback = function(label, index)
-		local state = stepState(index, activeStep)
+	local _callback = function(title, index)
+		local state = stepState(index, activeStep, errorStep)
+		local caption = `{index + 1}. {title}`
+		local look = cx(styles.step, state == "active" and styles.active, state == "complete" and styles.complete, state == "error" and styles.error)
+		local press = if onStep ~= nil then stepPress(index, activeStep) else nil
+		if onStep == nil then
+			local _attributes_2 = {
+				key = `{title}-{index}`,
+			}
+			for _k, _v in look do
+				_attributes_2[_k] = _v
+			end
+			_attributes_2.Text = caption
+			_attributes_2.LayoutOrder = index
+			return React.createElement("textlabel", _attributes_2)
+		end
 		local _attributes_2 = {
-			key = `{label}-{index}`,
+			key = `{title}-{index}`,
 		}
-		for _k, _v in cx(styles.step, state == "active" and styles.active, state == "complete" and styles.complete) do
+		for _k, _v in look do
 			_attributes_2[_k] = _v
 		end
-		_attributes_2.Text = `{index + 1}. {label}`
+		_attributes_2.Text = caption
 		_attributes_2.LayoutOrder = index
-		return React.createElement("textlabel", _attributes_2)
+		_attributes_2.AutoButtonColor = false
+		_attributes_2.Active = press ~= nil
+		_attributes_2.Selectable = press ~= nil
+		_attributes_2.Event = {
+			Activated = function()
+				if press ~= nil then
+					onStep(press)
+				end
+			end,
+		}
+		return React.createElement("textbutton", _attributes_2)
 	end
 	for _k, _v in steps do
 		_newValue[_k] = _callback(_v, _k - 1, steps)

package/out/ui/packages/stepper/components/Stepper.styles.luau

@@ -35,6 +35,9 @@ local useStepperStyles = componentStyles("Stepper", function(theme, _param)
 		complete = {
 			TextColor3 = theme.palette.text.primary,
 		},
+		error = {
+			TextColor3 = theme.palette.status.error.main,
+		},
 	})
 end)
 local default = useStepperStyles

package/out/ui/packages/stepper/components/stepState.d.ts

@@ -1,2 +1,4 @@
-export type StepState = "complete" | "active" | "pending";
-export declare function stepState(index: number, activeStep: number): StepState;
+export type StepState = "complete" | "active" | "pending" | "error";
+export declare function stepState(index: number, activeStep: number, errorStep?: number): StepState;
+/** Completed and current steps can be pressed. A later step cannot. */
+export declare function stepPress(index: number, activeStep: number): number | undefined;

package/out/ui/packages/stepper/components/stepState.luau

@@ -1,5 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
-local function stepState(index, activeStep)
+local function stepState(index, activeStep, errorStep)
+	if errorStep ~= nil and index == errorStep then
+		return "error"
+	end
 	if index < activeStep then
 		return "complete"
 	end
@@ -8,6 +11,14 @@ local function stepState(index, activeStep)
 	end
 	return "pending"
 end
+--* Completed and current steps can be pressed. A later step cannot. 
+local function stepPress(index, activeStep)
+	if index < 0 or index > activeStep then
+		return nil
+	end
+	return index
+end
 return {
 	stepState = stepState,
+	stepPress = stepPress,
 }

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

@@ -1,3 +1,3 @@
 export { default as Stepper } from "./components/Stepper";
 export { StepperProps } from "./components/Stepper";
-export { stepState, StepState } from "./components/stepState";
+export { stepPress, stepState, StepState } from "./components/stepState";

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

@@ -2,5 +2,7 @@
 local TS = _G[script]
 local exports = {}
 exports.Stepper = TS.import(script, script, "components", "Stepper").default
-exports.stepState = TS.import(script, script, "components", "stepState").stepState
+local _stepState = TS.import(script, script, "components", "stepState")
+exports.stepPress = _stepState.stepPress
+exports.stepState = _stepState.stepState
 return exports

package/out/ui/packages/switch/components/Switch.styles.luau

@@ -4,6 +4,7 @@ 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 useSwitchStyles = componentStyles("Switch", function(theme, _param)
 	local size = _param.size
 	local color = _param.color
@@ -54,11 +55,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
-		stroke = {
-			Color = theme.palette.focus,
-			Thickness = 2,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
+		stroke = focusRing(theme.palette.focus),
 	})
 end)
 local default = useSwitchStyles

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

@@ -4,6 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 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
+local sortedRowOrder = TS.import(script, script.Parent, "tableSort").sortedRowOrder
 local _tableColumns = TS.import(script, script.Parent, "tableColumns")
 local canSort = _tableColumns.canSort
 local columnSizes = _tableColumns.columnSizes
@@ -48,6 +49,7 @@ local function Table(props)
 	-- ▲ ReadonlyArray.map ▲
 	local resolved = _newValue
 	local sizes = columnSizes(resolved)
+	local order = sortedRowOrder(rows, sortColumn, sortDirection)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -144,15 +146,16 @@ local function Table(props)
 	-- ▲ ReadonlyArray.map ▲
 	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue_1))
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue_2 = table.create(#rows)
-	local _callback_2 = function(cells, rowIndex)
+	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 = rowIndex + 1
+		_attributes_6.LayoutOrder = place + 1
 		_attributes_6.Event = {
 			Activated = function()
 				local _result = onRowActivated
@@ -206,8 +209,8 @@ local function Table(props)
 		-- ▲ ReadonlyArray.map ▲
 		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_3))
 	end
-	for _k, _v in rows do
-		_newValue_2[_k] = _callback_2(_v, _k - 1, rows)
+	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))

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

@@ -0,0 +1,2 @@
+/** Source indexes in sort order. Ties keep the original row order. */
+export declare function sortedRowOrder(rows: ReadonlyArray<ReadonlyArray<unknown>>, column?: number, direction?: "asc" | "desc"): number[];

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

@@ -0,0 +1,95 @@
+-- Compiled with roblox-ts v3.0.0
+local function sortKey(value)
+	local _value = value
+	if type(_value) == "number" then
+		return value
+	end
+	local _value_1 = value
+	local _condition = type(_value_1) == "string"
+	if _condition then
+		_condition = value ~= ""
+	end
+	if _condition then
+		local numeric = tonumber(value)
+		if numeric ~= nil then
+			return numeric
+		end
+		return value
+	end
+	return ""
+end
+local function keyBefore(left, right)
+	local _left = left
+	local _condition = type(_left) == "number"
+	if _condition then
+		local _right = right
+		_condition = type(_right) == "number"
+	end
+	if _condition then
+		return left < right
+	end
+	local _left_1 = left
+	local leftText = if type(_left_1) == "number" then `{left}` else left
+	local _right = right
+	local rightText = if type(_right) == "number" then `{right}` else right
+	return leftText < rightText
+end
+local function rowBefore(rows, left, right, column, desc)
+	local leftKey = sortKey(rows[left + 1][column + 1])
+	local rightKey = sortKey(rows[right + 1][column + 1])
+	if leftKey == rightKey then
+		return false
+	end
+	local before = keyBefore(leftKey, rightKey)
+	return if desc then not before else before
+end
+--* Source indexes in sort order. Ties keep the original row order. 
+local function sortedRowOrder(rows, column, direction)
+	local count = #rows
+	local order = {}
+	do
+		local index = 0
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < count) then
+				break
+			end
+			local _index = index
+			table.insert(order, _index)
+		end
+	end
+	if column == nil then
+		return order
+	end
+	local desc = direction == "desc"
+	do
+		local index = 1
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				index += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (index < count) then
+				break
+			end
+			local current = order[index + 1]
+			local slot = index
+			while slot > 0 and rowBefore(rows, current, order[slot], column, desc) do
+				order[slot + 1] = order[slot]
+				slot -= 1
+			end
+			order[slot + 1] = current
+		end
+	end
+	return order
+end
+return {
+	sortedRowOrder = sortedRowOrder,
+}

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

@@ -1,3 +1,4 @@
 export { default as Table } from "./components/Table";
 export { TableProps, TableColumn, TableCell } from "./components/Table";
 export { TableAlign, TableSortDirection } from "./components/tableColumns";
+export { sortedRowOrder } from "./components/tableSort";

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

@@ -2,4 +2,5 @@
 local TS = _G[script]
 local exports = {}
 exports.Table = TS.import(script, script, "components", "Table").default
+exports.sortedRowOrder = TS.import(script, script, "components", "tableSort").sortedRowOrder
 return exports

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

@@ -1,10 +1,14 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local tabScroll = TS.import(script, script.Parent, "tabScroll").tabScroll
 local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
 local function Tabs(props)
@@ -24,12 +28,61 @@ local function Tabs(props)
 		centered = centered,
 	})
 	local vertical = tabsIsVertical(orientation)
+	local frame = useRef()
+	local tabs = useRef({})
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
 			onChange(choice.value)
 		end
 	end
+	useEffect(function()
+		local alive = true
+		local reveal = function()
+			if not alive then
+				return nil
+			end
+			local host = frame.current
+			if host == nil then
+				return nil
+			end
+			-- ▼ ReadonlyArray.findIndex ▼
+			local _callback = function(option)
+				return option.value == value
+			end
+			local _result = -1
+			for _i, _v in options do
+				if _callback(_v, _i - 1, options) == true then
+					_result = _i - 1
+					break
+				end
+			end
+			-- ▲ ReadonlyArray.findIndex ▲
+			local index = _result
+			local tab = tabs.current[index + 1]
+			if tab == nil then
+				return nil
+			end
+			local current = if vertical then host.CanvasPosition.Y else host.CanvasPosition.X
+			local origin = if vertical then host.AbsolutePosition.Y else host.AbsolutePosition.X
+			local start = if vertical then tab.AbsolutePosition.Y else tab.AbsolutePosition.X
+			local size = if vertical then tab.AbsoluteSize.Y else tab.AbsoluteSize.X
+			local view = if vertical then host.AbsoluteSize.Y else host.AbsoluteSize.X
+			if view <= 0 then
+				return nil
+			end
+			local scrolled = tabScroll(current, start - (origin - current), size, view)
+			if math.abs(scrolled - current) < 1 then
+				return nil
+			end
+			host.CanvasPosition = if vertical then Vector2.new(host.CanvasPosition.X, scrolled) else Vector2.new(scrolled, host.CanvasPosition.Y)
+		end
+		-- Next frame. A deferred scroll write runs inside this effect flush and re-enters render.
+		task.delay(0, reveal)
+		return function()
+			alive = false
+		end
+	end, { value, vertical, #options })
 	local onKey = function(_, input)
 		-- ▼ ReadonlyArray.findIndex ▼
 		local _callback = function(option)
@@ -60,7 +113,17 @@ local function Tabs(props)
 		_condition = "Tabs"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
+	_attributes.hostRef = function(instance)
+		frame.current = instance
+		if ref == nil then
+			return nil
+		end
+		if type(ref) == "function" then
+			ref(instance)
+		else
+			ref.current = instance
+		end
+	end
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
@@ -83,6 +146,11 @@ local function Tabs(props)
 		end
 		_attributes_2.Text = choice.label
 		_attributes_2.LayoutOrder = index
+		_attributes_2.ref = function(rbx)
+			if rbx ~= nil then
+				tabs.current[index + 1] = rbx
+			end
+		end
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active
 		_attributes_2.Event = {

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

@@ -0,0 +1,2 @@
+/** Canvas offset that keeps the selected tab inside the view. */
+export declare function tabScroll(current: number, tabStart: number, tabSize: number, view: number): number;

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

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+--* Canvas offset that keeps the selected tab inside the view. 
+local function tabScroll(current, tabStart, tabSize, view)
+	if view <= 0 then
+		return current
+	end
+	if tabStart < current then
+		return if tabStart < 0 then 0 else tabStart
+	end
+	local tabEnd = tabStart + tabSize
+	if tabEnd > current + view then
+		return tabEnd - view
+	end
+	return current
+end
+return {
+	tabScroll = tabScroll,
+}

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

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

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

@@ -0,0 +1,54 @@
+-- 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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local textBox = TS.import(script, script.Parent, "textBox").textBox
+local function Text(props)
+	local _binding = props
+	local text = _binding.text
+	if text == nil then
+		text = ""
+	end
+	local wrap = _binding.wrap
+	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 box = textBox(wrap)
+	local _attributes = {
+		tag = "textlabel",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Text"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	local _object = {
+		Text = text,
+		Size = UDim2.new(box.widthScale, 0, box.heightScale, 0),
+		AutomaticSize = if box.automatic == "Y" then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
+		TextWrapped = box.wrapped,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.body,
+		TextColor3 = theme.palette.text.primary,
+	}
+	if className then
+		for _k, _v in className do
+			_object[_k] = _v
+		end
+	end
+	_attributes.base = _object
+	_attributes.sx = sx
+	return React.createElement(SxHost, _attributes)
+end
+local default = Text
+return {
+	default = default,
+}

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

@@ -0,0 +1,12 @@
+/** Shrink-wrap by default. Wrap uses the parent width and grows with the text. */
+export declare function textBox(wrap?: boolean): {
+    widthScale: number;
+    heightScale: number;
+    automatic: "Y";
+    wrapped: boolean;
+} | {
+    widthScale: number;
+    heightScale: number;
+    automatic: "XY";
+    wrapped: boolean;
+};