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

package/out/ui/packages/dateRange/dateRangeValue.luau

@@ -107,6 +107,37 @@ local function formatSpan(value)
 	end
 	return `{formatStamp(value.start)} – {formatStamp(value.finish)}`
 end
+--* Inverse of dayIndex. Day 1 is 1 Jan of year 1. 
+local function stampFromIndex(index)
+	local left = index
+	local year = 1
+	while left > (if isLeapYear(year) then 366 else 365) do
+		left -= if isLeapYear(year) then 366 else 365
+		year += 1
+	end
+	local month = 1
+	while month < 12 and left > daysInMonth(year, month) do
+		left -= daysInMonth(year, month)
+		month += 1
+	end
+	return dateStamp(year, month, left)
+end
+local function shiftDay(stamp, delta)
+	return stampFromIndex(dayIndex(stamp) + delta)
+end
+--* Seven stamps, Sunday through Saturday, containing the day. 
+local function weekStamps(stamp)
+	local year = math.floor(stamp / 10000)
+	local month = math.floor(stamp / 100) % 100
+	local day = stamp % 100
+	local origin = dayIndex(stamp) - weekday(year, month, day)
+	local week = {}
+	for offset = 0, 6 do
+		local _arg0 = stampFromIndex(origin + offset)
+		table.insert(week, _arg0)
+	end
+	return week
+end
 return {
 	isLeapYear = isLeapYear,
 	daysInMonth = daysInMonth,
@@ -118,4 +149,7 @@ return {
 	nightsBetween = nightsBetween,
 	formatStamp = formatStamp,
 	formatSpan = formatSpan,
+	stampFromIndex = stampFromIndex,
+	shiftDay = shiftDay,
+	weekStamps = weekStamps,
 }

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

@@ -1,3 +1,3 @@
 export { default as DateRangePicker } from "./components/DateRangePicker";
 export { DateRangePickerProps } from "./components/DateRangePicker";
-export { DateSpan, dateStamp, dayIndex, daysInMonth, formatSpan, formatStamp, isLeapYear, nightsBetween, orderSpan, shiftMonth, weekday, } from "./dateRangeValue";
+export { DateSpan, dateStamp, dayIndex, daysInMonth, formatSpan, formatStamp, isLeapYear, nightsBetween, orderSpan, shiftDay, shiftMonth, stampFromIndex, weekday, weekStamps, } from "./dateRangeValue";

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

@@ -11,6 +11,9 @@ exports.formatStamp = _dateRangeValue.formatStamp
 exports.isLeapYear = _dateRangeValue.isLeapYear
 exports.nightsBetween = _dateRangeValue.nightsBetween
 exports.orderSpan = _dateRangeValue.orderSpan
+exports.shiftDay = _dateRangeValue.shiftDay
 exports.shiftMonth = _dateRangeValue.shiftMonth
+exports.stampFromIndex = _dateRangeValue.stampFromIndex
 exports.weekday = _dateRangeValue.weekday
+exports.weekStamps = _dateRangeValue.weekStamps
 return exports

package/out/ui/packages/dialog/components/Dialog.d.ts

@@ -5,6 +5,7 @@ export interface DialogProps {
     open: boolean;
     title?: string;
     onClose: () => void;
+    fullWidth?: boolean;
     children?: React.ReactNode;
     actions?: React.ReactNode;
 }

package/out/ui/packages/dialog/components/Dialog.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 _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Modal = TS.import(script, script.Parent.Parent.Parent, "modal").Modal
+local portalTarget = TS.import(script, script.Parent.Parent.Parent, "popup").portalTarget
+local dialogWidth = TS.import(script, script.Parent, "dialogWidth").dialogWidth
 local useDialogStyles = TS.import(script, script.Parent, "Dialog.styles").default
 local function Dialog(props)
 	local _binding = props
@@ -10,15 +17,57 @@ local function Dialog(props)
 	local open = _binding.open
 	local title = _binding.title
 	local onClose = _binding.onClose
+	local fullWidth = _binding.fullWidth
 	local children = _binding.children
 	local actions = _binding.actions
 	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 = useDialogStyles()
+	local probe = useRef()
+	local room, setRoom = useState(0)
 	local hasTitle = title ~= nil and title ~= ""
 	local hasActions = actions ~= nil
+	local fill = fullWidth == true
+	useEffect(function()
+		if not fill then
+			return nil
+		end
+		local layer = portalTarget(host or probe.current)
+		if layer == nil or not layer:IsA("GuiBase2d") then
+			return nil
+		end
+		local read = function()
+			return setRoom(layer.AbsoluteSize.X)
+		end
+		read()
+		local connection = layer:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
+		return function()
+			return connection:Disconnect()
+		end
+	end, { fill, host, open })
+	local width = dialogWidth(fullWidth, room - theme.padding.calc(2) * 2, theme.padding.calc(36))
+	local _result
+	if fill then
+		local _object = table.clone(styles.column)
+		setmetatable(_object, nil)
+		_object.AutomaticSize = Enum.AutomaticSize.Y
+		_object.Size = UDim2.fromOffset(width, 0)
+		_result = _object
+	else
+		_result = styles.column
+	end
+	local column = _result
+	local _exp = React.createElement("frame", {
+		key = "Probe",
+		ref = probe,
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	})
 	local _attributes = {
 		tag = "frame",
 	}
@@ -28,12 +77,12 @@ local function Dialog(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.column
+	_attributes.base = column
 	_attributes.className = className
 	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.columnList)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_1)
 	local _condition_1 = hasTitle
 	if _condition_1 then
 		local _attributes_2 = {
@@ -51,7 +100,7 @@ local function Dialog(props)
 	for _k, _v in styles.body do
 		_attributes_2[_k] = _v
 	end
-	local _exp_1 = React.createElement("frame", _attributes_2, children)
+	local _exp_2 = React.createElement("frame", _attributes_2, children)
 	local _condition_2 = hasActions
 	if _condition_2 then
 		local _attributes_3 = {
@@ -64,11 +113,11 @@ local function Dialog(props)
 		setmetatable(_attributes_4, nil)
 		_condition_2 = (React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), actions))
 	end
-	return React.createElement(Modal, {
+	return React.createElement(React.Fragment, nil, _exp, React.createElement(Modal, {
 		host = host,
 		open = open,
 		onClose = onClose,
-	}, React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2))
+	}, React.createElement(SxHost, _attributes, _exp_1, _condition_1, _exp_2, _condition_2)))
 end
 local default = Dialog
 return {

package/out/ui/packages/dialog/components/Dialog.styles.luau

@@ -6,7 +6,7 @@ local componentStyles = _theme.componentStyles
 local useDialogStyles = componentStyles("Dialog", function(theme)
 	return createStyles({
 		column = {
-			AutomaticSize = Enum.AutomaticSize.XY,
+			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.fromOffset(theme.padding.calc(36), 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
@@ -18,14 +18,15 @@ local useDialogStyles = componentStyles("Dialog", function(theme)
 		},
 		title = {
 			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.h6,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
 		},
 		body = {
 			LayoutOrder = 2,
@@ -46,6 +47,7 @@ local useDialogStyles = componentStyles("Dialog", function(theme)
 			HorizontalAlignment = Enum.HorizontalAlignment.Right,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			Wraps = true,
 		},
 	})
 end)

package/out/ui/packages/dialog/components/dialogWidth.d.ts

@@ -0,0 +1,7 @@
+/** Desktop forms stay a column. Phone uses the room instead of the fixed width. */
+export declare const DIALOG_FILL_MAX = 480;
+export declare function dialogWidth(fill: boolean | undefined, available: number, fixed: number, max?: number): number;
+/** Two small actions are wider than the fixed column, so the row wraps at every width. */
+export declare function dialogActionWrap(fixed: number, button: number, count: number, gap?: number): boolean;
+/** A title wider than the column wraps. A short title stays one line. */
+export declare function dialogTitleWrap(textWidth: number, column: number): boolean;

package/out/ui/packages/dialog/components/dialogWidth.luau

@@ -0,0 +1,35 @@
+-- Compiled with roblox-ts v3.0.0
+--* Desktop forms stay a column. Phone uses the room instead of the fixed width. 
+local DIALOG_FILL_MAX = 480
+local function dialogWidth(fill, available, fixed, max)
+	if max == nil then
+		max = DIALOG_FILL_MAX
+	end
+	if fill ~= true or available <= 0 then
+		return fixed
+	end
+	return if available < max then available else max
+end
+--* Two small actions are wider than the fixed column, so the row wraps at every width. 
+local function dialogActionWrap(fixed, button, count, gap)
+	if gap == nil then
+		gap = 0
+	end
+	if count < 2 or fixed <= 0 then
+		return false
+	end
+	return button * count + gap * (count - 1) > fixed
+end
+--* A title wider than the column wraps. A short title stays one line. 
+local function dialogTitleWrap(textWidth, column)
+	if column <= 0 then
+		return false
+	end
+	return textWidth > column
+end
+return {
+	dialogWidth = dialogWidth,
+	dialogActionWrap = dialogActionWrap,
+	dialogTitleWrap = dialogTitleWrap,
+	DIALOG_FILL_MAX = DIALOG_FILL_MAX,
+}

package/out/ui/packages/divider/components/Divider.luau

@@ -1,9 +1,17 @@
 -- 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 useState = _react.useState
+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 Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
+local _dividerLabel = TS.import(script, script.Parent, "dividerLabel")
+local dividerFit = _dividerLabel.dividerFit
+local dividerLabel = _dividerLabel.dividerLabel
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
@@ -19,17 +27,52 @@ local function Divider(props)
 	local line = _binding_1.line
 	local caption = _binding_1.caption
 	local captionPad = _binding_1.captionPad
+	local _binding_2 = useTheme()
+	local theme = _binding_2.theme
 	local label = dividerLabel(text)
-	if label ~= nil and orientation ~= Orientations.Vertical then
+	local labeled = label ~= nil and orientation ~= Orientations.Vertical
+	local shellRef = useRef()
+	local box, setBox = useState(0)
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = 12
+	end
+	local textSize = _condition
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local measured = if labeled then TextService:GetTextSize(label, textSize, font, Vector2.new(10000, 100)).X else 0
+	local room = math.max(0, box - theme.padding.calc(2) * 2)
+	local fit = if labeled then dividerFit(measured + theme.padding.calc(1) * 2, room) else 0
+	useEffect(function()
+		local rbx = shellRef.current
+		if not rbx then
+			return nil
+		end
+		local update = function()
+			return setBox(rbx.AbsoluteSize.X)
+		end
+		update()
+		local connection = rbx:GetPropertyChangedSignal("AbsoluteSize"):Connect(update)
+		return function()
+			return connection:Disconnect()
+		end
+	end)
+	if labeled then
 		local _attributes = {
 			tag = "frame",
 		}
-		local _condition = id
-		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-			_condition = "Divider"
+		local _condition_1 = id
+		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+			_condition_1 = "Divider"
+		end
+		_attributes.key = _condition_1
+		_attributes.hostRef = function(instance)
+			shellRef.current = instance
+			if type(ref) == "function" then
+				ref(instance)
+			elseif ref ~= nil then
+				ref.current = instance
+			end
 		end
-		_attributes.key = _condition
-		_attributes.hostRef = ref
 		_attributes.base = shell
 		_attributes.className = className
 		_attributes.sx = sx
@@ -47,6 +90,8 @@ local function Divider(props)
 			_attributes_2[_k] = _v
 		end
 		_attributes_2.Text = label
+		_attributes_2.Size = if fit > 0 then UDim2.new(0, fit, 1, 0) else UDim2.new(0, 0, 1, 0)
+		_attributes_2.AutomaticSize = if fit > 0 then Enum.AutomaticSize.None else Enum.AutomaticSize.X
 		local _attributes_3 = table.clone(captionPad)
 		setmetatable(_attributes_3, nil)
 		return React.createElement(SxHost, _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
@@ -54,11 +99,11 @@ local function Divider(props)
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Divider"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Divider"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	local _object = table.clone(root)
 	setmetatable(_object, nil)

package/out/ui/packages/divider/components/dividerLabel.d.ts

@@ -1 +1,3 @@
 export declare function dividerLabel(text?: string): string | undefined;
+/** A caption wider than the row caps. A short caption stays on the line. */
+export declare function dividerFit(textWidth: number, box: number): number;

package/out/ui/packages/divider/components/dividerLabel.luau

@@ -5,6 +5,17 @@ local function dividerLabel(text)
 	end
 	return text
 end
+--* A caption wider than the row caps. A short caption stays on the line. 
+local function dividerFit(textWidth, box)
+	if box <= 0 then
+		return 0
+	end
+	if textWidth <= box then
+		return 0
+	end
+	return box
+end
 return {
 	dividerLabel = dividerLabel,
+	dividerFit = dividerFit,
 }

package/out/ui/packages/drawer/components/Drawer.d.ts

@@ -6,6 +6,7 @@ export interface DrawerProps {
     open: boolean;
     edge?: DrawerEdge;
     width?: number;
+    height?: number;
     onClose: () => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/drawer/components/Drawer.luau

@@ -11,7 +11,9 @@ local isDismissInput = TS.import(script, script.Parent.Parent.Parent, "modal", "
 local _popup = TS.import(script, script.Parent.Parent.Parent, "popup")
 local Portal = _popup.Portal
 local portalTarget = _popup.portalTarget
-local drawerAnchor = TS.import(script, script.Parent, "drawerPlacement").drawerAnchor
+local _drawerPlacement = TS.import(script, script.Parent, "drawerPlacement")
+local drawerAnchor = _drawerPlacement.drawerAnchor
+local drawerBox = _drawerPlacement.drawerBox
 local useDrawerStyles = TS.import(script, script.Parent, "Drawer.styles").default
 local function Drawer(props)
 	local _binding = props
@@ -22,6 +24,7 @@ local function Drawer(props)
 		edge = "left"
 	end
 	local width = _binding.width
+	local height = _binding.height
 	local onClose = _binding.onClose
 	local children = _binding.children
 	local className = _binding.className
@@ -54,6 +57,17 @@ local function Drawer(props)
 		end
 	end, { open, layer })
 	local placement = drawerAnchor(edge)
+	local _result
+	if edge == "bottom" then
+		local _condition = height
+		if _condition == nil then
+			_condition = 0
+		end
+		_result = drawerBox(edge, _condition)
+	else
+		_result = nil
+	end
+	local sheet = _result
 	local panelStyle = styles.panel
 	local _exp = React.createElement("frame", {
 		key = "DrawerAnchor",
@@ -94,8 +108,9 @@ local function Drawer(props)
 		_attributes_2.base = panelStyle
 		_attributes_2.className = className
 		_attributes_2.sx = sx
-		_attributes_2.AnchorPoint = Vector2.new(placement, 0)
-		_attributes_2.Position = UDim2.fromScale(placement, 0)
+		_attributes_2.AnchorPoint = Vector2.new(if sheet ~= nil then sheet.anchorX else placement, if sheet ~= nil then sheet.anchorY else 0)
+		_attributes_2.Position = UDim2.fromScale(if sheet ~= nil then sheet.posX else placement, if sheet ~= nil then sheet.posY else 0)
+		_attributes_2.Size = if sheet ~= nil then UDim2.new(sheet.sizeX, sheet.sizeXO, sheet.sizeY, sheet.sizeYO) else nil
 		_attributes_2.ZIndex = panelStyle.ZIndex
 		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)

package/out/ui/packages/drawer/components/drawerPlacement.d.ts

@@ -1,2 +1,14 @@
-export type DrawerEdge = "left" | "right";
+export type DrawerEdge = "left" | "right" | "bottom";
 export declare function drawerAnchor(edge: DrawerEdge): 1 | 0;
+export interface DrawerBox {
+    anchorX: number;
+    anchorY: number;
+    posX: number;
+    posY: number;
+    sizeX: number;
+    sizeXO: number;
+    sizeY: number;
+    sizeYO: number;
+}
+/** Side drawers keep a column. A bottom sheet spans the width and sits on the lower edge. */
+export declare function drawerBox(edge: DrawerEdge, span: number): DrawerBox;

package/out/ui/packages/drawer/components/drawerPlacement.luau

@@ -2,6 +2,34 @@
 local function drawerAnchor(edge)
 	return if edge == "left" then 0 else 1
 end
+--* Side drawers keep a column. A bottom sheet spans the width and sits on the lower edge. 
+local function drawerBox(edge, span)
+	local size = if span > 0 then span else 160
+	if edge == "bottom" then
+		return {
+			anchorX = 0,
+			anchorY = 1,
+			posX = 0,
+			posY = 1,
+			sizeX = 1,
+			sizeXO = 0,
+			sizeY = 0,
+			sizeYO = size,
+		}
+	end
+	local side = drawerAnchor(edge)
+	return {
+		anchorX = side,
+		anchorY = 0,
+		posX = side,
+		posY = 0,
+		sizeX = 0,
+		sizeXO = size,
+		sizeY = 1,
+		sizeYO = 0,
+	}
+end
 return {
 	drawerAnchor = drawerAnchor,
+	drawerBox = drawerBox,
 }

package/out/ui/packages/fab/components/fabSize.d.ts

@@ -1,4 +1,4 @@
 export type FabSize = "small" | "medium" | "large";
-export declare function fabPixels(size?: FabSize): 40 | 64 | 56;
+export declare function fabPixels(size?: FabSize): 40 | 56 | 64;
 export declare function fabIconPixels(size?: FabSize): 18 | 24 | 28;
 export declare function fabExtended(label?: string): boolean;

package/out/ui/packages/iconButton/components/IconButton.d.ts

@@ -1,7 +1,9 @@
 import { Icons } from "../../../enums/index";
 import { CustomizedProps } from "../../../../theme/index";
+import { TransportGlyph } from "./transportGlyph";
 export interface IconButtonProps {
     icon: Icons;
+    glyph?: TransportGlyph;
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
     tint: Color3;
     selected?: boolean;

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -10,9 +10,11 @@ local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "co
 local iconSpinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").iconSpinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
+local transportGlyph = TS.import(script, script.Parent, "transportGlyph").transportGlyph
 local function IconButton(props)
 	local _binding = props
 	local icon = _binding.icon
+	local glyph = _binding.glyph
 	local selected = _binding.selected
 	local tint = _binding.tint
 	local disabled = _binding.disabled
@@ -31,6 +33,7 @@ local function IconButton(props)
 	local corner = _binding_1.corner
 	local reducedMotion = useReducedMotion(reducedProp)
 	local active = canActivate(disabled, loading)
+	local drawn = if glyph ~= nil then transportGlyph(glyph) else nil
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
 	useEffect(function()
@@ -63,8 +66,8 @@ local function IconButton(props)
 	_attributes.AutoButtonColor = active
 	_attributes.Selectable = active
 	_attributes.BackgroundTransparency = if loading then 1 elseif not active or hovering or selected or focused then 0.5 else 1
-	_attributes.Image = tostring(icon)
-	_attributes.ImageTransparency = if loading then 1 else 0
+	_attributes.Image = if drawn ~= nil then "" else tostring(icon)
+	_attributes.ImageTransparency = if drawn ~= nil or loading then 1 else 0
 	_attributes.ImageColor3 = tint or container.ImageColor3
 	_attributes.Event = {
 		MouseButton1Click = function()
@@ -91,7 +94,38 @@ local function IconButton(props)
 	}
 	local _attributes_1 = table.clone(corner)
 	setmetatable(_attributes_1, nil)
-	return React.createElement(SxHost, _attributes, React.createElement("uicorner", _attributes_1), loading and (React.createElement(CircularProgress, {
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _result
+	if drawn ~= nil then
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#drawn)
+		local _callback = function(part, index)
+			return React.createElement("frame", {
+				key = `g-{index}`,
+				Position = UDim2.fromOffset(part.x, part.y),
+				Size = UDim2.fromOffset(math.max(part.w, 1), math.max(part.h, 1)),
+				BackgroundColor3 = tint,
+				BorderSizePixel = 0,
+				ZIndex = 12001,
+			})
+		end
+		for _k, _v in drawn do
+			_newValue[_k] = _callback(_v, _k - 1, drawn)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = (React.createElement("frame", {
+			key = "Glyph",
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Size = UDim2.fromOffset(16, 16),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 12001,
+		}, _newValue))
+	else
+		_result = nil
+	end
+	return React.createElement(SxHost, _attributes, _exp, _result, loading and (React.createElement(CircularProgress, {
 		size = iconSpinnerPixels(props.size),
 		thickness = 2,
 		color = tint,

package/out/ui/packages/iconButton/components/transportGlyph.d.ts

@@ -0,0 +1,9 @@
+export type TransportGlyph = "play" | "pause" | "previous" | "next";
+export interface GlyphRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Play, pause, previous, and next as a few rectangles. Not an icon font. */
+export declare function transportGlyph(name: TransportGlyph, size?: number): GlyphRect[];

package/out/ui/packages/iconButton/components/transportGlyph.luau

@@ -0,0 +1,73 @@
+-- Compiled with roblox-ts v3.0.0
+local function wedge(size, pointRight)
+	local steps = 6
+	local h = math.max(1, math.floor(size / steps))
+	local mid = (steps - 1) / 2
+	local parts = {}
+	for i = 0, steps - 1 do
+		local reach = 1 - math.abs(i - mid) / mid
+		local w = math.max(1, math.floor(reach * size))
+		local x = if pointRight then 0 else size - w
+		local _arg0 = {
+			x = x,
+			y = i * h,
+			w = w,
+			h = h,
+		}
+		table.insert(parts, _arg0)
+	end
+	return parts
+end
+--* Play, pause, previous, and next as a few rectangles. Not an icon font. 
+local function transportGlyph(name, size)
+	if size == nil then
+		size = 16
+	end
+	local box = math.max(4, math.floor(size))
+	if name == "pause" then
+		local bar = math.max(2, math.floor(box / 5))
+		local gap = bar
+		local span = bar * 2 + gap
+		local x0 = math.floor((box - span) / 2)
+		return { {
+			x = x0,
+			y = 0,
+			w = bar,
+			h = box,
+		}, {
+			x = x0 + bar + gap,
+			y = 0,
+			w = bar,
+			h = box,
+		} }
+	end
+	if name == "play" then
+		return wedge(box, true)
+	end
+	local bar = math.max(2, math.floor(box / 6))
+	local mark = {
+		x = if name == "previous" then 0 else box - bar,
+		y = 0,
+		w = bar,
+		h = box,
+	}
+	local inner = math.max(4, box - bar - 1)
+	local shift = if name == "previous" then bar + 1 else 0
+	local moved = {}
+	for _, part in wedge(inner, name ~= "previous") do
+		local _arg0 = {
+			x = part.x + shift,
+			y = part.y,
+			w = part.w,
+			h = part.h,
+		}
+		table.insert(moved, _arg0)
+	end
+	local _array = { mark }
+	local _length = #_array
+	table.move(moved, 1, #moved, _length + 1, _array)
+	return _array
+end
+return {
+	transportGlyph = transportGlyph,
+}