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

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

@@ -0,0 +1,22 @@
+import { ControlSize, Theme } from "../../theme/index";
+export declare function editorPad(theme: Theme): number;
+/** Same height as the Input these rows host, so the label and the field share one center. */
+export declare function editorRowHeight(theme: Theme, size?: ControlSize): number;
+export declare function editorText(theme: Theme): {
+    Font: Required<Enum.Font> | undefined;
+    TextSize: number | undefined;
+    TextTruncate: Enum.TextTruncate.AtEnd;
+    TextXAlignment: Enum.TextXAlignment.Left;
+    TextYAlignment: Enum.TextYAlignment.Center;
+};
+export declare function useEditorHover(disabled?: boolean): {
+    active: boolean;
+    face: {
+        BackgroundColor3: Color3;
+        BackgroundTransparency: number;
+    };
+    event: {
+        MouseEnter: () => void;
+        MouseLeave: () => void;
+    };
+};

package/out/ui/packages/editorFace.luau

@@ -0,0 +1,49 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local _theme = TS.import(script, script.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local function editorPad(theme)
+	return theme.padding.calc(1)
+end
+--* Same height as the Input these rows host, so the label and the field share one center. 
+local function editorRowHeight(theme, size)
+	return controlMetrics(theme.density, size).height
+end
+local function editorText(theme)
+	return {
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.caption,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Center,
+	}
+end
+local function useEditorHover(disabled)
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local hovering, setHovering = useState(false)
+	local active = hovering and disabled ~= true
+	return {
+		active = active,
+		face = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = if active then 0 else 1,
+		},
+		event = {
+			MouseEnter = function()
+				return setHovering(true)
+			end,
+			MouseLeave = function()
+				return setHovering(false)
+			end,
+		},
+	}
+end
+return {
+	editorPad = editorPad,
+	editorRowHeight = editorRowHeight,
+	editorText = editorText,
+	useEditorHover = useEditorHover,
+}

package/out/ui/packages/fab/components/Fab.luau

@@ -4,7 +4,10 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local focusRing = _theme.focusRing
+local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
@@ -46,6 +49,7 @@ local function Fab(props)
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
+	local tone = if color == "accent" then theme.palette.accent else theme.palette.primary
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
 	local iconPx = fabIconPixels(size)
@@ -104,7 +108,8 @@ local function Fab(props)
 	}
 	_attributes.Active = active
 	_attributes.Selectable = active
-	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
+	_attributes.BackgroundColor3 = if active and hovering then tone.hover else tone.main
+	_attributes.BackgroundTransparency = if disabled == true then controlFade else 0
 	_attributes.Event = {
 		Activated = function()
 			if active and onClick then
@@ -131,8 +136,16 @@ local function Fab(props)
 	local _attributes_1 = table.clone(styles.corner)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
-	local _exp_1 = React.createElement(Shadow)
 	local _result_1
+	if focused and active then
+		local _attributes_2 = table.clone(focusRing(theme.palette.focus))
+		setmetatable(_attributes_2, nil)
+		_result_1 = React.createElement("uistroke", _attributes_2)
+	else
+		_result_1 = nil
+	end
+	local _exp_1 = React.createElement(Shadow)
+	local _result_2
 	if extended then
 		local _attributes_2 = {
 			key = "Content",
@@ -158,11 +171,11 @@ local function Fab(props)
 			_attributes_5.Text = label
 			_condition_1 = React.createElement("textlabel", _attributes_5)
 		end
-		_result_1 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
+		_result_2 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
 	else
-		_result_1 = iconEl
+		_result_2 = iconEl
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _result_1)
+	return React.createElement(SxHost, _attributes, _exp, _result_1, _exp_1, _result_2)
 end
 local default = Fab
 return {

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlFade = _theme.controlFade
 local createStyles = _theme.createStyles
 local fabPixels = TS.import(script, script.Parent, "fabSize").fabPixels
 local useFabStyles = componentStyles("Fab", function(theme, _param)
@@ -22,7 +23,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			Size = if extended == true then UDim2.new(0, 0, 0, diameter) else UDim2.fromOffset(diameter, diameter),
 			AutomaticSize = if extended == true then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
 			BackgroundColor3 = tone.main,
-			BackgroundTransparency = if disabled then 0.5 else 0,
+			BackgroundTransparency = if disabled then controlFade else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
@@ -54,7 +55,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Fit,
 			ImageColor3 = tone.on,
-			ImageTransparency = if disabled then 0.5 else 0,
+			ImageTransparency = 0,
 			LayoutOrder = 1,
 		},
 		label = {
@@ -65,7 +66,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = tone.on,
-			TextTransparency = if disabled then 0.5 else 0,
+			TextTransparency = 0,
 			LayoutOrder = 2,
 		},
 	})

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 | 56 | 64;
+export declare function fabPixels(size?: FabSize): 40 | 64 | 56;
 export declare function fabIconPixels(size?: FabSize): 18 | 24 | 28;
 export declare function fabExtended(label?: string): boolean;

package/out/ui/packages/fontEditor/components/FontEditor.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
@@ -34,8 +35,10 @@ local function builtInFamilies()
 	end
 	local fonts = {}
 	for _, item in Enum.Font:GetEnumItems() do
-		local _arg0 = Font.fromEnum(item)
-		table.insert(fonts, _arg0)
+		if item ~= Enum.Font.Unknown then
+			local _arg0 = Font.fromEnum(item)
+			table.insert(fonts, _arg0)
+		end
 	end
 	cachedFamilies = enumFamilies(fonts)
 	return cachedFamilies
@@ -50,6 +53,7 @@ local function FontEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useFontEditorStyles()
+	local hover = useEditorHover(disabled)
 	local active = canActivate(disabled)
 	local families = builtInFamilies()
 	-- ▼ ReadonlyArray.find ▼
@@ -83,12 +87,18 @@ local function FontEditor(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.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/fontEditor/components/FontEditor.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 useFontEditorStyles = componentStyles("FontEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,42 +17,47 @@ local useFontEditorStyles = componentStyles("FontEditor", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		pair = {
-			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, theme.spacing.calc(2)),
+			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		fill = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-		},
-		preview = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundColor3 = theme.palette.surface.input,
-			BorderSizePixel = 0,
-			Text = "The quick brown fox",
-			TextColor3 = theme.palette.text.primary,
-			TextSize = theme.typography.fontSizes.body,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.default),
-			PaddingRight = UDim.new(0, theme.padding.default),
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Size = UDim2.new(1, 0, 0, editorRowHeight(theme)),
 		},
-	})
+	}
+	local _left = "preview"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+		BackgroundColor3 = theme.palette.surface.input,
+		BorderSizePixel = 0,
+		Text = "The quick brown fox",
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.padding = {
+		PaddingLeft = UDim.new(0, editorPad(theme)),
+		PaddingRight = UDim.new(0, editorPad(theme)),
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	return createStyles(_object)
 end)
 local default = useFontEditorStyles
 return {

package/out/ui/packages/gradientEditor/components/GradientEditor.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 _colorPicker = TS.import(script, script.Parent.Parent.Parent, "colorPicker")
 local ColorSequenceEditor = _colorPicker.ColorSequenceEditor
@@ -22,6 +23,7 @@ local function GradientEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useGradientEditorStyles()
+	local hover = useEditorHover(disabled)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -31,12 +33,18 @@ local function GradientEditor(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.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -58,10 +66,10 @@ local function GradientEditor(props)
 		value = value.color,
 		disabled = disabled,
 		onChange = function(color)
-			local _object = table.clone(value)
-			setmetatable(_object, nil)
-			_object.color = color
-			return onChange(_object)
+			local _object_1 = table.clone(value)
+			setmetatable(_object_1, nil)
+			_object_1.color = color
+			return onChange(_object_1)
 		end,
 	}))
 	local _attributes_5 = {
@@ -82,10 +90,10 @@ local function GradientEditor(props)
 		value = value.transparency,
 		disabled = disabled,
 		onChange = function(transparency)
-			local _object = table.clone(value)
-			setmetatable(_object, nil)
-			_object.transparency = transparency
-			return onChange(_object)
+			local _object_1 = table.clone(value)
+			setmetatable(_object_1, nil)
+			_object_1.transparency = transparency
+			return onChange(_object_1)
 		end,
 	}))
 	local _attributes_8 = {
@@ -142,10 +150,10 @@ local function GradientEditor(props)
 		value = value.offset,
 		disabled = disabled,
 		onChange = function(offset)
-			local _object = table.clone(value)
-			setmetatable(_object, nil)
-			_object.offset = offset
-			return onChange(_object)
+			local _object_1 = table.clone(value)
+			setmetatable(_object_1, nil)
+			_object_1.offset = offset
+			return onChange(_object_1)
 		end,
 	})))
 	local _attributes_17 = {

package/out/ui/packages/gradientEditor/components/GradientEditor.styles.luau

@@ -3,8 +3,11 @@ 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 editorText = _editorFace.editorText
 local useGradientEditorStyles = componentStyles("GradientEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,7 +16,7 @@ local useGradientEditorStyles = componentStyles("GradientEditor", function(theme
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		block = {
@@ -21,48 +24,53 @@ local useGradientEditorStyles = componentStyles("GradientEditor", function(theme
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		metrics = {
-			Size = UDim2.new(1, 0, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		metricsRow = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-			VerticalAlignment = Enum.VerticalAlignment.Top,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		metric = {
-			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		metricInner = {
-			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		metricLabel = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		metricField = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundTransparency = 1,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.metrics = {
+		Size = UDim2.new(1, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}
+	_object.metricsRow = {
+		FillDirection = Enum.FillDirection.Horizontal,
+		Padding = UDim.new(0, editorPad(theme)),
+		VerticalAlignment = Enum.VerticalAlignment.Top,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}
+	_object.metric = {
+		Size = UDim2.new(0.5, -editorPad(theme) / 2, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}
+	_object.metricInner = {
+		FillDirection = Enum.FillDirection.Vertical,
+		Padding = UDim.new(0, editorPad(theme)),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}
+	local _left_1 = "metricLabel"
+	local _object_2 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	_object.metricField = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useGradientEditorStyles
 return {

package/out/ui/packages/icon/components/DrawnGlyph.d.ts

@@ -0,0 +1,11 @@
+import { Glyph } from "./glyphs";
+interface DrawnGlyphProps {
+    name: Glyph;
+    size: number;
+    color: Color3;
+    transparency?: number;
+    zIndex?: number;
+}
+/** Fills its parent. Parts are placed by scale so only the stroke weight depends on `size`. */
+export declare function DrawnGlyph(props: DrawnGlyphProps): JSX.Element;
+export {};

package/out/ui/packages/icon/components/DrawnGlyph.luau

@@ -0,0 +1,87 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _glyphs = TS.import(script, script.Parent, "glyphs")
+local glyphParts = _glyphs.glyphParts
+local glyphStroke = _glyphs.glyphStroke
+local GRID = 24
+local PILL = UDim.new(1, 0)
+local CENTER = Vector2.new(0.5, 0.5)
+--* Fills its parent. Parts are placed by scale so only the stroke weight depends on `size`. 
+local function DrawnGlyph(props)
+	local _binding = props
+	local name = _binding.name
+	local size = _binding.size
+	local color = _binding.color
+	local transparency = _binding.transparency
+	if transparency == nil then
+		transparency = 0
+	end
+	local zIndex = _binding.zIndex
+	local t = glyphStroke(size)
+	local _exp = glyphParts(name)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#_exp)
+	local _callback = function(part, index)
+		local key = `g{index}`
+		if part.kind == "bar" then
+			local dx = part.x2 - part.x1
+			local dy = part.y2 - part.y1
+			return React.createElement("frame", {
+				key = key,
+				AnchorPoint = CENTER,
+				Position = UDim2.fromScale((part.x1 + part.x2) / 2 / GRID, (part.y1 + part.y2) / 2 / GRID),
+				Size = UDim2.new(math.sqrt(dx * dx + dy * dy) / GRID, t, 0, t),
+				Rotation = math.deg(math.atan2(dy, dx)),
+				BackgroundColor3 = color,
+				BackgroundTransparency = transparency,
+				BorderSizePixel = 0,
+				ZIndex = zIndex,
+			}, React.createElement("uicorner", {
+				CornerRadius = PILL,
+			}))
+		end
+		if part.kind == "dot" then
+			return React.createElement("frame", {
+				key = key,
+				AnchorPoint = CENTER,
+				Position = UDim2.fromScale(part.x / GRID, part.y / GRID),
+				Size = UDim2.fromScale(part.d / GRID, part.d / GRID),
+				SizeConstraint = Enum.SizeConstraint.RelativeXX,
+				BackgroundColor3 = color,
+				BackgroundTransparency = transparency,
+				BorderSizePixel = 0,
+				ZIndex = zIndex,
+			}, React.createElement("uicorner", {
+				CornerRadius = PILL,
+			}))
+		end
+		local ringed = part.kind == "ring"
+		local w = if ringed then part.d else part.w
+		local h = if ringed then part.d else part.h
+		local x = if ringed then part.x - part.d / 2 else part.x
+		local y = if ringed then part.y - part.d / 2 else part.y
+		return React.createElement("frame", {
+			key = key,
+			Position = UDim2.new(x / GRID, t, y / GRID, t),
+			Size = UDim2.new(w / GRID, -t * 2, h / GRID, -t * 2),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = zIndex,
+		}, React.createElement("uicorner", {
+			CornerRadius = if ringed then PILL else UDim.new(0, t),
+		}), React.createElement("uistroke", {
+			Color = color,
+			Thickness = t,
+			Transparency = transparency,
+		}))
+	end
+	for _k, _v in _exp do
+		_newValue[_k] = _callback(_v, _k - 1, _exp)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(React.Fragment, nil, _newValue)
+end
+return {
+	DrawnGlyph = DrawnGlyph,
+}

package/out/ui/packages/icon/components/Icon.d.ts

@@ -1,8 +1,12 @@
 import { Icons } from "../../../enums/index";
 import { CustomizedProps } from "../../../../theme/index";
+import { Glyph } from "./glyphs";
 export interface IconProps {
-    icon: Icons;
-    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+    icon?: Icons;
+    /** Drawn glyph. Wins over `icon`. */
+    glyph?: Glyph;
+    /** Named step, or pixels from `controlMetrics().icon`. */
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | number;
     tint?: Color3;
 }
 type DefaultIconComponent = ImageLabel;

package/out/ui/packages/icon/components/Icon.luau

@@ -2,10 +2,12 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local DrawnGlyph = TS.import(script, script.Parent, "DrawnGlyph").DrawnGlyph
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
 	local icon = _binding.icon
+	local glyph = _binding.glyph
 	local tint = _binding.tint
 	local className = _binding.className
 	local sx = _binding.sx
@@ -13,6 +15,7 @@ local function Icon(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
+	local color = tint or (container.ImageColor3)
 	local _attributes = {
 		tag = "imagelabel",
 	}
@@ -25,9 +28,26 @@ local function Icon(props)
 	_attributes.base = container
 	_attributes.className = className
 	_attributes.sx = sx
-	_attributes.Image = tostring(icon)
-	_attributes.ImageColor3 = tint or container.ImageColor3
-	return React.createElement(SxHost, _attributes)
+	_attributes.Image = if glyph ~= nil or icon == nil then "" else tostring(icon)
+	_attributes.ImageColor3 = color
+	local _condition_1 = glyph ~= nil
+	if _condition_1 then
+		local _attributes_1 = {
+			name = glyph,
+		}
+		local _result = container.Size
+		if _result ~= nil then
+			_result = _result.X.Offset
+		end
+		local _condition_2 = _result
+		if _condition_2 == nil then
+			_condition_2 = 16
+		end
+		_attributes_1.size = _condition_2
+		_attributes_1.color = color
+		_condition_1 = (React.createElement(DrawnGlyph, _attributes_1))
+	end
+	return React.createElement(SxHost, _attributes, _condition_1)
 end
 local default = Icon
 return {