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

package/out/ui/packages/input/components/Input.luau

@@ -5,9 +5,11 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
+local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local cx = _theme.cx
 local useTheme = _theme.useTheme
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
@@ -73,6 +75,8 @@ local function Input(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local focusedRef = useRef(false)
+	local strokeRef = useRef()
+	local motion = useReducedMotion(reducedMotion)
 	local entered = useRef(false)
 	local _condition = text
 	if _condition == nil then
@@ -103,7 +107,6 @@ local function Input(props)
 	local errorColorText = _binding_2.errorColorText
 	local divider = _binding_2.divider
 	local corner = _binding_2.corner
-	local stroke = _binding_2.stroke
 	useEffect(function()
 		setDraft(function(current)
 			return clampText(syncInputDraft(focusedRef.current, text, current), maxLength)
@@ -111,6 +114,21 @@ local function Input(props)
 	end, { text, maxLength })
 	local showStroke = variant == "outlined" or variant == "filled"
 	local showCorner = rounded
+	local ink = if hasError then theme.palette.status.error.main elseif focused then theme.palette.focus else theme.palette.border
+	local weight = if focused then 2 else 1
+	useEffect(function()
+		if not showStroke then
+			return nil
+		end
+		local line = strokeRef.current
+		if not line then
+			return nil
+		end
+		return playProperty(line, {
+			Color = ink,
+			Thickness = weight,
+		}, theme.motion.fast, motion)
+	end, { showStroke, ink, weight, motion, theme })
 	local _attributes = {
 		tag = "frame",
 	}
@@ -140,27 +158,26 @@ local function Input(props)
 	for _k, _v in shell do
 		_attributes_2[_k] = _v
 	end
-	local _condition_2 = showStroke
+	local _exp = showStroke and React.createElement("uistroke", {
+		ref = strokeRef,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		Transparency = 0,
+	})
+	local _condition_2 = showCorner
 	if _condition_2 then
-		local _attributes_3 = table.clone(stroke)
-		setmetatable(_attributes_3, nil)
-		_condition_2 = React.createElement("uistroke", _attributes_3)
-	end
-	local _condition_3 = showCorner
-	if _condition_3 then
 		local _attributes_3 = table.clone(corner)
 		setmetatable(_attributes_3, nil)
-		_condition_3 = React.createElement("uicorner", _attributes_3)
+		_condition_2 = React.createElement("uicorner", _attributes_3)
 	end
-	local _condition_4 = startAdornment ~= nil
-	if _condition_4 then
+	local _condition_3 = startAdornment ~= nil
+	if _condition_3 then
 		local _attributes_3 = {
 			key = "Start",
 		}
 		for _k, _v in startSlot do
 			_attributes_3[_k] = _v
 		end
-		_condition_4 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
+		_condition_3 = (React.createElement("frame", _attributes_3, adornmentAlign(), startAdornment))
 	end
 	local _attributes_3 = {
 		key = "Field",
@@ -233,48 +250,48 @@ local function Input(props)
 			if onBlur then
 				onBlur()
 			end
-			local _condition_5 = text
-			if _condition_5 == nil then
-				_condition_5 = ""
+			local _condition_4 = text
+			if _condition_4 == nil then
+				_condition_4 = ""
 			end
-			setDraft(clampText(_condition_5, maxLength))
+			setDraft(clampText(_condition_4, maxLength))
 		end,
 	}
-	local _exp = React.createElement("textbox", _attributes_3)
-	local _condition_5 = loading
-	if _condition_5 then
+	local _exp_1 = React.createElement("textbox", _attributes_3)
+	local _condition_4 = loading
+	if _condition_4 then
 		local _attributes_4 = {
 			key = "End",
 		}
 		for _k, _v in endSlot do
 			_attributes_4[_k] = _v
 		end
-		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), React.createElement(CircularProgress, {
+		_condition_4 = (React.createElement("frame", _attributes_4, adornmentAlign(), React.createElement(CircularProgress, {
 			size = spinnerPixels(size),
 			thickness = 2,
 			color = theme.palette.text.secondary,
 			reducedMotion = reducedMotion,
 		})))
 	end
-	local _condition_6 = endSlotContent ~= nil
-	if _condition_6 then
+	local _condition_5 = endSlotContent ~= nil
+	if _condition_5 then
 		local _attributes_4 = {
 			key = "End",
 		}
 		for _k, _v in endSlot do
 			_attributes_4[_k] = _v
 		end
-		_condition_6 = (React.createElement("frame", _attributes_4, adornmentAlign(), endSlotContent))
+		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), endSlotContent))
 	end
-	local _exp_1 = React.createElement("frame", _attributes_2, _condition_2, _condition_3, _condition_4, _exp, _condition_5, _condition_6)
-	local _exp_2 = variant == "standard" and (React.createElement(Divider, {
+	local _exp_2 = React.createElement("frame", _attributes_2, _exp, _condition_2, _condition_3, _exp_1, _condition_4, _condition_5)
+	local _exp_3 = variant == "standard" and (React.createElement(Divider, {
 		padding = 0,
 		weight = if focused then 2 else nil,
 		orientation = Orientations.Horizontal,
 		className = cx(divider, hasError and errorColorFrame),
 	}))
-	local _condition_7 = helperText ~= nil
-	if _condition_7 then
+	local _condition_6 = helperText ~= nil
+	if _condition_6 then
 		local _attributes_4 = {
 			key = "HelperText",
 		}
@@ -288,9 +305,9 @@ local function Input(props)
 			_attributes_4[_k] = _v
 		end
 		_attributes_4.Text = helperText
-		_condition_7 = (React.createElement("textlabel", _attributes_4))
+		_condition_6 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp_2, _exp_3, _condition_6))
 end
 local default = Input
 return {

package/out/ui/packages/input/components/Input.styles.luau

@@ -5,13 +5,10 @@ local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local focusRing = _theme.focusRing
+local fieldChrome = TS.import(script, script.Parent, "fieldChrome").fieldChrome
 local inputInsets = TS.import(script, script.Parent, "inputInsets").inputInsets
 local multilineHeight = TS.import(script, script.Parent, "multilineHeight").multilineHeight
 local useInputStyles = componentStyles("Input", function(theme, _param)
-	local color = _param.color
-	if color == nil then
-		color = "primary"
-	end
 	local margin = _param.margin
 	if margin == nil then
 		margin = "none"
@@ -61,14 +58,14 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		contentHeight = 0
 	end
 	local metrics = controlMetrics(theme.density, size)
+	local chrome = fieldChrome(metrics.height, theme.padding.calc(1))
 	local hasStart = startAdornment ~= nil
 	local hasEnd = endAdornment ~= nil or loading
 	local icon = metrics.icon
-	local gap = theme.padding.calc(1)
+	local gap = chrome.padX
 	local insets = inputInsets(hasStart, hasEnd, icon, gap)
-	local verticalPad = theme.padding.calc(1)
-	local fieldHeight = if multiline then multilineHeight(contentHeight, metrics.font, minRows, maxRows, verticalPad) else metrics.height + (if variant == "standard" then 0 else verticalPad)
-	local accent = if color == "primary" then theme.palette.primary.main else theme.palette.text.primary
+	local verticalPad = chrome.padX
+	local fieldHeight = if multiline then multilineHeight(contentHeight, metrics.font, minRows, maxRows, verticalPad) else chrome.height
 	local makeRootStyles = function()
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
@@ -186,7 +183,7 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 		},
 		divider = {
 			Position = UDim2.new(0, 0, 0, fieldHeight),
-			BackgroundColor3 = if focused then theme.palette.focus else accent,
+			BackgroundColor3 = if focused then theme.palette.focus else theme.palette.border,
 			ZIndex = 11000,
 		},
 		corner = {
@@ -195,8 +192,8 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 	}
 	local _left = "stroke"
 	local _object_1 = {
-		Color = if hasError then theme.palette.status.error.main else accent,
-		Transparency = if focused or hasError then 0 else 0.45,
+		Color = if hasError then theme.palette.status.error.main elseif focused then theme.palette.focus else theme.palette.border,
+		Transparency = 0,
 		Thickness = 1,
 		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 	}

package/out/ui/packages/input/components/fieldChrome.d.ts

@@ -0,0 +1,5 @@
+/** Shared single-line field size. Height is the control metric. Inset is one padding step. */
+export declare function fieldChrome(controlHeight: number, padUnit: number): {
+    height: number;
+    padX: number;
+};

package/out/ui/packages/input/components/fieldChrome.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Shared single-line field size. Height is the control metric. Inset is one padding step. 
+local function fieldChrome(controlHeight, padUnit)
+	return {
+		height = controlHeight,
+		padX = padUnit,
+	}
+end
+return {
+	fieldChrome = fieldChrome,
+}

package/out/ui/packages/layout/components/Box.luau

@@ -1,8 +1,71 @@
 -- 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 resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
 local useBoxStyles = TS.import(script, script.Parent, "Box.styles").default
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
+local function padPixels(themePad, padding, resolved)
+	local sides = boxPadSides(padding)
+	if sides.top + sides.right + sides.bottom + sides.left > 0 then
+		return {
+			left = themePad(sides.left),
+			right = themePad(sides.right),
+			top = themePad(sides.top),
+			bottom = themePad(sides.bottom),
+		}
+	end
+	local _object = {}
+	local _left = "left"
+	local _result = resolved
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	_object[_left] = _condition
+	local _left_1 = "right"
+	local _result_1 = resolved
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	_object[_left_1] = _condition_1
+	local _left_2 = "top"
+	local _result_2 = resolved
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	_object[_left_2] = _condition_2
+	local _left_3 = "bottom"
+	local _result_3 = resolved
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	_object[_left_3] = _condition_3
+	return _object
+end
 local function Box(props)
 	local _binding = props
 	local padding = _binding.padding
@@ -12,27 +75,43 @@ local function Box(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useBoxStyles({
-		padding = padding,
 		bgcolor = bgcolor,
 	})
+	local resolved = resolveSx(theme, sx).padding
+	local edges = padPixels(function(step)
+		return theme.spacing.calc(step)
+	end, padding, resolved)
+	local inset = padActive(edges.left, edges.right, edges.top, edges.bottom)
+	local _result = sx
+	if _result ~= nil then
+		_result = _result.AutomaticSize
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = styleAutomaticSize(styles.root)
+	end
+	local auto = automaticAxes(_condition)
 	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Box"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Box"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = styles.root
 	_attributes.className = className
-	_attributes.sx = sx
-	local _condition_1 = padding ~= nil
-	if _condition_1 then
-		local _attributes_1 = table.clone(styles.padding)
-		setmetatable(_attributes_1, nil)
-		_condition_1 = React.createElement("uipadding", _attributes_1)
-	end
-	return React.createElement(SxHost, _attributes, _condition_1, children)
+	_attributes.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes, if inset then (React.createElement(Pad, {
+		left = edges.left,
+		right = edges.right,
+		top = edges.top,
+		bottom = edges.bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, children)) else children)
 end
 local default = Box
 return {

package/out/ui/packages/layout/components/Box.styles.d.ts

@@ -1,7 +1,5 @@
-import { BoxPad } from "./boxPad";
 export type BoxBg = "transparent" | "paper" | "elevated" | "input";
 declare const useBoxStyles: (props: {
-    padding?: BoxPad;
     bgcolor?: BoxBg;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBoxStyles;

package/out/ui/packages/layout/components/Box.styles.luau

@@ -3,14 +3,11 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
 local useBoxStyles = componentStyles("Box", function(theme, _param)
-	local padding = _param.padding
 	local bgcolor = _param.bgcolor
 	if bgcolor == nil then
 		bgcolor = "transparent"
 	end
-	local sides = boxPadSides(padding)
 	local fill = if bgcolor == "paper" then theme.palette.surface.paper elseif bgcolor == "elevated" then theme.palette.surface.elevated elseif bgcolor == "input" then theme.palette.surface.input else theme.palette.surface.paper
 	return createStyles({
 		root = {
@@ -20,12 +17,6 @@ local useBoxStyles = componentStyles("Box", function(theme, _param)
 			BackgroundTransparency = if bgcolor == "transparent" then 1 else 0,
 			BorderSizePixel = 0,
 		},
-		padding = {
-			PaddingTop = UDim.new(0, theme.spacing.calc(sides.top)),
-			PaddingRight = UDim.new(0, theme.spacing.calc(sides.right)),
-			PaddingBottom = UDim.new(0, theme.spacing.calc(sides.bottom)),
-			PaddingLeft = UDim.new(0, theme.spacing.calc(sides.left)),
-		},
 	})
 end)
 local default = useBoxStyles

package/out/ui/packages/layout/components/Grid.luau

@@ -4,7 +4,15 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _Pad = TS.import(script, script.Parent, "Pad")
+local automaticAxes = _Pad.automaticAxes
+local Pad = _Pad.Pad
+local padActive = _Pad.padActive
+local styleAutomaticSize = _Pad.styleAutomaticSize
+local withoutPad = _Pad.withoutPad
 local _gridProps = TS.import(script, script.Parent, "gridProps")
 local gridCornerKey = _gridProps.gridCornerKey
 local gridMaxCells = _gridProps.gridMaxCells
@@ -92,7 +100,9 @@ local function Grid(props)
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useGridStyles({
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _binding_2 = useGridStyles({
 		cellPadding = cellPadding,
 		cellSize = cellSize,
 		gap = gap,
@@ -105,25 +115,80 @@ local function Grid(props)
 		horizontalAlignment = horizontalAlignment,
 		verticalAlignment = verticalAlignment,
 	})
-	local baseGrid = _binding_1.baseGrid
-	local baseLayout = _binding_1.baseLayout
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Grid"
-	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = baseGrid
-	_attributes.className = className
-	_attributes.sx = sx
-	local _attributes_1 = {
+	local baseGrid = _binding_2.baseGrid
+	local baseLayout = _binding_2.baseLayout
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = padActive(left, right, top, bottom)
+	local _result_4 = sx
+	if _result_4 ~= nil then
+		_result_4 = _result_4.AutomaticSize
+	end
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = styleAutomaticSize(baseGrid)
+	end
+	local auto = automaticAxes(_condition_4)
+	local _attributes = {
 		key = "GridLayout",
 	}
 	for _k, _v in baseLayout do
-		_attributes_1[_k] = _v
+		_attributes[_k] = _v
+	end
+	local body = (React.createElement(React.Fragment, nil, React.createElement("uigridlayout", _attributes), children))
+	local _attributes_1 = {}
+	local _condition_5 = id
+	if not (_condition_5 ~= 0 and _condition_5 == _condition_5 and _condition_5 ~= "" and _condition_5) then
+		_condition_5 = "Grid"
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("uigridlayout", _attributes_1), children)
+	_attributes_1.key = _condition_5
+	_attributes_1.hostRef = ref
+	_attributes_1.base = baseGrid
+	_attributes_1.className = className
+	_attributes_1.sx = if inset then withoutPad(sx) else sx
+	return React.createElement(SxHost, _attributes_1, if inset then (React.createElement(Pad, {
+		left = left,
+		right = right,
+		top = top,
+		bottom = bottom,
+		autoX = auto.x,
+		autoY = auto.y,
+	}, body)) else body)
 end
 local default = Grid
 return {

package/out/ui/packages/layout/components/Pad.d.ts

@@ -0,0 +1,24 @@
+import React from "@rbxts/react";
+/** Padding on the host offsets scale-sized children without shrinking them. */
+export declare function withoutPad(sx: object | undefined): {
+    [key: string]: unknown;
+} | undefined;
+export declare function styleAutomaticSize(style: object): Enum.AutomaticSize | undefined;
+export declare function automaticAxes(value: Enum.AutomaticSize | undefined): {
+    x: boolean;
+    y: boolean;
+};
+export declare function padActive(left: number, right: number, top: number, bottom: number): boolean;
+/**
+ * Fixed axes use a shrunk size so scale children stop at the padding.
+ * Automatic axes keep trailing padding on the content instead.
+ */
+export declare function Pad(props: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    autoX: boolean;
+    autoY: boolean;
+    children?: React.ReactNode;
+}): JSX.Element;

package/out/ui/packages/layout/components/Pad.luau

@@ -0,0 +1,88 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local function isPadKey(key)
+	return key == "p" or key == "px" or key == "py" or key == "pt" or key == "pr" or key == "pb" or key == "pl" or key == "padding"
+end
+--* Padding on the host offsets scale-sized children without shrinking them. 
+local function withoutPad(sx)
+	if sx == nil then
+		return nil
+	end
+	local rest = {}
+	local kept = false
+	for key, value in pairs(sx) do
+		local name = tostring(key)
+		if isPadKey(name) then
+			continue
+		end
+		rest[name] = value
+		kept = true
+	end
+	return if kept then rest else nil
+end
+local function styleAutomaticSize(style)
+	return style.AutomaticSize
+end
+local function automaticAxes(value)
+	if value == Enum.AutomaticSize.X then
+		return {
+			x = true,
+			y = false,
+		}
+	end
+	if value == Enum.AutomaticSize.Y then
+		return {
+			x = false,
+			y = true,
+		}
+	end
+	if value == Enum.AutomaticSize.XY then
+		return {
+			x = true,
+			y = true,
+		}
+	end
+	return {
+		x = false,
+		y = false,
+	}
+end
+local function padActive(left, right, top, bottom)
+	return left + right + top + bottom > 0
+end
+--[[
+	*
+	 * Fixed axes use a shrunk size so scale children stop at the padding.
+	 * Automatic axes keep trailing padding on the content instead.
+	 
+]]
+local function Pad(props)
+	local _binding = props
+	local left = _binding.left
+	local right = _binding.right
+	local top = _binding.top
+	local bottom = _binding.bottom
+	local autoX = _binding.autoX
+	local autoY = _binding.autoY
+	local children = _binding.children
+	local auto = if autoX and autoY then Enum.AutomaticSize.XY elseif autoY then Enum.AutomaticSize.Y elseif autoX then Enum.AutomaticSize.X else Enum.AutomaticSize.None
+	return React.createElement("frame", {
+		key = "Pad",
+		Position = UDim2.new(0, left, 0, top),
+		Size = UDim2.new(if autoX then 0 else 1, if autoX then 0 else -(left + right), if autoY then 0 else 1, if autoY then 0 else -(top + bottom)),
+		AutomaticSize = auto,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, if autoX or autoY then (React.createElement("uipadding", {
+		PaddingRight = UDim.new(0, if autoX then right else 0),
+		PaddingBottom = UDim.new(0, if autoY then bottom else 0),
+	})) else nil, children)
+end
+return {
+	withoutPad = withoutPad,
+	styleAutomaticSize = styleAutomaticSize,
+	automaticAxes = automaticAxes,
+	padActive = padActive,
+	Pad = Pad,
+}