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

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,49 @@ 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) + theme.shape.borderRadius * 2 + 2
+	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
@@ -48,33 +82,45 @@ local function Menu(props)
 	local _attributes_2 = table.clone(styles.stroke)
 	setmetatable(_attributes_2, nil)
 	local _exp_1 = React.createElement("uistroke", _attributes_2)
-	local _attributes_3 = table.clone(styles.list)
+	local _attributes_3 = table.clone(styles.inset)
 	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
-	local _result
+	local _exp_2 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = table.clone(styles.list)
+	setmetatable(_attributes_4, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
+	local _result_1
 	if vacant then
-		local _condition_1 = empty
-		if _condition_1 == nil then
-			local _attributes_4 = {}
-			local _condition_2 = emptyText
-			if _condition_2 == nil then
-				_condition_2 = "No options"
+		local _condition_2 = empty
+		if _condition_2 == nil then
+			local _attributes_5 = {}
+			local _condition_3 = emptyText
+			if _condition_3 == nil then
+				_condition_3 = "No options"
 			end
-			_attributes_4.text = _condition_2
-			_attributes_4.height = row
-			_condition_1 = React.createElement(EmptyListHint, _attributes_4)
+			_attributes_5.text = _condition_3
+			_attributes_5.height = row
+			_condition_2 = React.createElement(EmptyListHint, _attributes_5)
 		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,18 @@ 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, {
+		open = open,
 		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, _exp_3, _result_1))
 end
 local default = Menu
 return {

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

@@ -6,7 +6,8 @@ local componentStyles = _theme.componentStyles
 local useMenuStyles = componentStyles("Menu", function(theme)
 	return createStyles({
 		surface = {
-			Size = UDim2.new(1, 0, 0, 0),
+			Position = UDim2.fromOffset(1, 1),
+			Size = UDim2.new(1, -2, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
@@ -18,6 +19,10 @@ local useMenuStyles = componentStyles("Menu", function(theme)
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		inset = {
+			PaddingTop = UDim.new(0, theme.shape.borderRadius),
+			PaddingBottom = UDim.new(0, theme.shape.borderRadius),
+		},
 		list = {
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,

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): 28 | 22 | 44 | 48;
+/** 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,44 @@
 -- Compiled with roblox-ts v3.0.0
 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 controlMetrics = _theme.controlMetrics
+local useTheme = _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(props.extent, props.extent),
+		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 = props.font,
+		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),
+	}), React.createElement("uistroke", {
+		Color = theme.palette.border,
+		Thickness = 1,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}))
+end
 local function NumberInput(props)
 	local _binding = props
 	local value = _binding.value
@@ -20,10 +54,14 @@ 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 _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	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 +91,50 @@ 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 metrics = controlMetrics(theme.density, size)
+	local extent = metrics.height
+	local stepFont = math.floor(metrics.font * 1.5)
+	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,
+		extent = extent,
+		font = stepFont,
+		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,
+		extent = extent,
+		font = stepFont,
+		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;

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

@@ -23,6 +23,15 @@ end
 local function parseNumberDraft(text, min, max, step)
 	return commitNumber(tonumber(text), min, max, step)
 end
+--* One step up or down. Undefined when the value would not change. 
+local function stepNumber(value, direction, min, max, step)
+	local size = if step ~= nil and step > 0 then step else 1
+	local landed = commitNumber(value + direction * size, min, max, step)
+	if landed == nil or landed == value then
+		return nil
+	end
+	return landed
+end
 local function formatNumber(value, places)
 	if places == nil then
 		places = 4
@@ -70,5 +79,6 @@ end
 return {
 	commitNumber = commitNumber,
 	parseNumberDraft = parseNumberDraft,
+	stepNumber = stepNumber,
 	formatNumber = formatNumber,
 }

package/out/ui/packages/numberRangeEditor/components/NumberRangeEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useNumberRangeEditorStyles = TS.import(script, script.Parent, "NumberRangeEditor.styles").default
@@ -15,6 +16,7 @@ local function NumberRangeEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useNumberRangeEditorStyles()
+	local hover = useEditorHover(disabled)
 	local commit = function(field, amount)
 		local parts = writeNumberRange(value.Min, value.Max, field, amount)
 		onChange(NumberRange.new(parts.Min, parts.Max))
@@ -28,12 +30,18 @@ local function NumberRangeEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = table.clone(styles.row)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/numberRangeEditor/components/NumberRangeEditor.styles.luau

@@ -3,8 +3,12 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useNumberRangeEditorStyles = componentStyles("NumberRangeEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,27 +17,30 @@ local useNumberRangeEditorStyles = componentStyles("NumberRangeEditor", function
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		axis = {
-			Size = UDim2.new(0.5, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(0.5, 0, 0, editorRowHeight(theme)),
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		field = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.field = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useNumberRangeEditorStyles
 return {

package/out/ui/packages/pager/components/Pager.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface PagerProps {
+    index: number;
+    count: number;
+    disabled?: boolean;
+    onChange: (index: number) => void;
+    children?: React.ReactNode;
+}
+declare function Pager(props: CustomizedProps<Frame, PagerProps>): JSX.Element;
+export default Pager;

package/out/ui/packages/pager/components/Pager.luau

@@ -0,0 +1,114 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local usePagerStyles = TS.import(script, script.Parent, "Pager.styles").default
+local _pagerStep = TS.import(script, script.Parent, "pagerStep")
+local pagerLabel = _pagerStep.pagerLabel
+local pagerPlace = _pagerStep.pagerPlace
+local pagerStep = _pagerStep.pagerStep
+local function Pager(props)
+	local _binding = props
+	local index = _binding.index
+	local count = _binding.count
+	local disabled = _binding.disabled
+	local onChange = _binding.onChange
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = usePagerStyles()
+	local place = pagerPlace(index, count)
+	local back = pagerStep(index, count, -1)
+	local forward = pagerStep(index, count, 1)
+	local groupOff = disabled == true
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Pager"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = groupOff,
+	}
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Bar",
+	}
+	for _k, _v in styles.bar do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 0
+	local _attributes_3 = table.clone(styles.barList)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_3)
+	local _attributes_4 = {
+		key = "Back",
+	}
+	for _k, _v in styles.button do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.Text = "Back"
+	_attributes_4.TextTransparency = if groupOff or back == place then 0.5 else 0
+	_attributes_4.Active = canActivate(groupOff or back == place)
+	_attributes_4.LayoutOrder = 0
+	_attributes_4.Event = {
+		Activated = function()
+			if not groupOff and back ~= place then
+				onChange(back)
+			end
+		end,
+	}
+	local _exp_2 = React.createElement("textbutton", _attributes_4)
+	local _attributes_5 = {
+		key = "Count",
+	}
+	for _k, _v in styles.label do
+		_attributes_5[_k] = _v
+	end
+	_attributes_5.Text = pagerLabel(index, count)
+	_attributes_5.LayoutOrder = 1
+	local _attributes_6 = table.clone(styles.labelCap)
+	setmetatable(_attributes_6, nil)
+	local _exp_3 = React.createElement("textlabel", _attributes_5, React.createElement("uisizeconstraint", _attributes_6))
+	local _attributes_7 = {
+		key = "Next",
+	}
+	for _k, _v in styles.button do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.Text = "Next"
+	_attributes_7.TextTransparency = if groupOff or forward == place then 0.5 else 0
+	_attributes_7.Active = canActivate(groupOff or forward == place)
+	_attributes_7.LayoutOrder = 2
+	_attributes_7.Event = {
+		Activated = function()
+			if not groupOff and forward ~= place then
+				onChange(forward)
+			end
+		end,
+	}
+	local _exp_4 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _exp_3, React.createElement("textbutton", _attributes_7))
+	local _attributes_8 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_8[_k] = _v
+	end
+	_attributes_8.LayoutOrder = 1
+	return React.createElement(SxHost, _attributes, _exp, _exp_4, React.createElement("frame", _attributes_8, children))
+end
+local default = Pager
+return {
+	default = default,
+}

package/out/ui/packages/pager/components/Pager.styles.d.ts

@@ -0,0 +1,2 @@
+declare const usePagerStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default usePagerStyles;

package/out/ui/packages/pager/components/Pager.styles.luau

@@ -0,0 +1,66 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local usePagerStyles = componentStyles("Pager", function(theme)
+	local metrics = controlMetrics(theme.density, "small")
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(2)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		bar = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+		barList = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.calc(2)),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		button = {
+			Size = UDim2.fromOffset(64, metrics.buttonHeight),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			AutoButtonColor = false,
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Size = UDim2.fromScale(0, 0),
+			TextColor3 = theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
+		},
+		labelCap = {
+			MaxSize = Vector2.new(theme.spacing.calc(10), math.huge),
+		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+		},
+	})
+end)
+local default = usePagerStyles
+return {
+	default = default,
+}

package/out/ui/packages/pager/components/pagerStep.d.ts

@@ -0,0 +1,3 @@
+export declare function pagerPlace(index: number, count: number): number;
+export declare function pagerStep(index: number, count: number, delta: number): number;
+export declare function pagerLabel(index: number, count: number): string;