@rbxts/uiblox 0.2.0-alpha.0 → 0.2.0-alpha.1

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

@@ -0,0 +1,128 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
+local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local fabIconPixels = TS.import(script, script.Parent, "fabSize").fabIconPixels
+local useFabStyles = TS.import(script, script.Parent, "Fab.styles").default
+local function Fab(props)
+	local _binding = props
+	local icon = _binding.icon
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
+	local disabled = _binding.disabled
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
+	local reducedMotion = _binding.reducedMotion
+	local onClick = _binding.onClick
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local active = canActivate(disabled, loading)
+	local styles = useFabStyles({
+		size = size,
+		disabled = not active,
+	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local hovering, setHovering = useState(false)
+	local focused, setFocused = useState(false)
+	local iconPx = fabIconPixels(size)
+	useEffect(function()
+		if active then
+			return nil
+		end
+		setHovering(false)
+		setFocused(false)
+	end, { active })
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Fab"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Active = active
+	_attributes.Selectable = active
+	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
+	_attributes.Event = {
+		Activated = function()
+			if active and onClick then
+				onClick()
+			end
+		end,
+		MouseEnter = function()
+			if active then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
+		SelectionGained = function()
+			if active then
+				setFocused(true)
+			end
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
+	}
+	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
+	if loading then
+		_result = (React.createElement(CircularProgress, {
+			size = iconPx,
+			thickness = 2,
+			color = theme.palette.primary.on,
+			reducedMotion = reducedMotion,
+			className = {
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Position = UDim2.fromScale(0.5, 0.5),
+			},
+		}))
+	else
+		local _attributes_2 = {
+			key = "Icon",
+		}
+		for _k, _v in styles.icon do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Size = UDim2.fromOffset(iconPx, iconPx)
+		_attributes_2.AnchorPoint = Vector2.new(0.5, 0.5)
+		_attributes_2.Position = UDim2.fromScale(0.5, 0.5)
+		_attributes_2.Image = tostring(icon)
+		_result = (React.createElement("imagelabel", _attributes_2))
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _result)
+end
+local default = Fab
+return {
+	default = default,
+}

package/out/ui/packages/fab/components/Fab.styles.d.ts

@@ -0,0 +1,7 @@
+import { FabSize } from "./fabSize";
+export interface FabStyleProps {
+    size?: FabSize;
+    disabled?: boolean;
+}
+declare const useFabStyles: (props: FabStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
+export default useFabStyles;

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

@@ -0,0 +1,40 @@
+-- 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 createStyles = _theme.createStyles
+local fabPixels = TS.import(script, script.Parent, "fabSize").fabPixels
+local useFabStyles = componentStyles("Fab", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local disabled = _param.disabled
+	local diameter = fabPixels(size)
+	return createStyles({
+		root = {
+			Size = UDim2.fromOffset(diameter, diameter),
+			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundTransparency = if disabled then 0.5 else 0,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+			ZIndex = 12000,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+		icon = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ImageColor3 = theme.palette.primary.on,
+			ImageTransparency = if disabled then 0.5 else 0,
+		},
+	})
+end)
+local default = useFabStyles
+return {
+	default = default,
+}

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

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

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

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local function fabPixels(size)
+	if size == nil then
+		size = "medium"
+	end
+	if size == "small" then
+		return 40
+	end
+	if size == "large" then
+		return 64
+	end
+	return 56
+end
+local function fabIconPixels(size)
+	if size == nil then
+		size = "medium"
+	end
+	if size == "small" then
+		return 18
+	end
+	if size == "large" then
+		return 28
+	end
+	return 24
+end
+return {
+	fabPixels = fabPixels,
+	fabIconPixels = fabIconPixels,
+}

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

@@ -0,0 +1,3 @@
+export { default as Fab } from "./components/Fab";
+export { FabProps } from "./components/Fab";
+export { FabSize, fabPixels, fabIconPixels } from "./components/fabSize";

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

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Fab = TS.import(script, script, "components", "Fab").default
+local _fabSize = TS.import(script, script, "components", "fabSize")
+exports.fabPixels = _fabSize.fabPixels
+exports.fabIconPixels = _fabSize.fabIconPixels
+return exports

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

@@ -9,10 +9,10 @@ local useIconStyles = componentStyles("Icon", function(theme, props)
 		local size = _binding.size
 		repeat
 			if size == "xxs" then
-				return UDim2.new(0, theme.spacing.calc(0.5), 0, theme.spacing.calc(0.5))
+				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
 			end
 			if size == "xs" then
-				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
+				return UDim2.new(0, theme.spacing.calc(1.5), 0, theme.spacing.calc(1.5))
 			end
 			if size == "sm" then
 				return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
@@ -21,10 +21,10 @@ local useIconStyles = componentStyles("Icon", function(theme, props)
 				return UDim2.new(0, theme.spacing.calc(3), 0, theme.spacing.calc(3))
 			end
 			if size == "lg" then
-				return UDim2.new(0, theme.spacing.calc(6), 0, theme.spacing.calc(6))
+				return UDim2.new(0, theme.spacing.calc(4), 0, theme.spacing.calc(4))
 			end
 			if size == "xl" then
-				return UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(8))
+				return UDim2.new(0, theme.spacing.calc(5), 0, theme.spacing.calc(5))
 			end
 			return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
 		until true

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

@@ -9,10 +9,10 @@ local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
 		local size = _binding.size
 		repeat
 			if size == "xxs" then
-				return UDim2.new(0, theme.spacing.calc(0.5), 0, theme.spacing.calc(0.5))
+				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
 			end
 			if size == "xs" then
-				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
+				return UDim2.new(0, theme.spacing.calc(1.5), 0, theme.spacing.calc(1.5))
 			end
 			if size == "sm" then
 				return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
@@ -21,10 +21,10 @@ local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
 				return UDim2.new(0, theme.spacing.calc(3), 0, theme.spacing.calc(3))
 			end
 			if size == "lg" then
-				return UDim2.new(0, theme.spacing.calc(6), 0, theme.spacing.calc(6))
+				return UDim2.new(0, theme.spacing.calc(4), 0, theme.spacing.calc(4))
 			end
 			if size == "xl" then
-				return UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(8))
+				return UDim2.new(0, theme.spacing.calc(5), 0, theme.spacing.calc(5))
 			end
 			return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
 		until true

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

@@ -47,6 +47,9 @@ export * from "./accordion/index";
 export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";
+export * from "./fab/index";
+export * from "./appBar/index";
+export * from "./bottomNavigation/index";
 export * from "./listItem/index";
 export * from "./menu/index";
 export * from "./motion/index";

package/out/ui/packages/init.luau

@@ -148,6 +148,15 @@ end
 for _k, _v in TS.import(script, script, "autocomplete") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "fab") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "appBar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "bottomNavigation") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "listItem") or {} do
 	exports[_k] = _v
 end

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

@@ -5,6 +5,7 @@ export type DefaultInputComponent = Frame;
 export interface InputProps {
     color?: InputColor;
     disabled?: boolean;
+    loading?: boolean;
     hasError?: boolean;
     helperText?: string;
     margin?: InputMargin;
@@ -15,6 +16,7 @@ export interface InputProps {
     rounded?: boolean;
     clearsTextOnFocus?: boolean;
     size?: ControlSize;
+    reducedMotion?: boolean;
     startAdornment?: React.Element;
     endAdornment?: React.Element;
     onTextChanged?: (text: string) => void;

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

@@ -5,7 +5,12 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
-local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local cx = _theme.cx
+local useTheme = _theme.useTheme
+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
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
@@ -31,6 +36,10 @@ local function Input(props)
 	if disabled == nil then
 		disabled = false
 	end
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
 	local hasError = _binding.hasError
 	if hasError == nil then
 		hasError = false
@@ -39,6 +48,8 @@ local function Input(props)
 	if rounded == nil then
 		rounded = false
 	end
+	local size = _binding.size
+	local reducedMotion = _binding.reducedMotion
 	local startAdornment = _binding.startAdornment
 	local endAdornment = _binding.endAdornment
 	local onTextChanged = _binding.onTextChanged
@@ -58,23 +69,27 @@ local function Input(props)
 	end
 	local draft, setDraft = useState(_condition)
 	local focused, setFocused = useState(false)
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local editable = canActivate(disabled, loading)
+	local endSlotContent = if loading then nil else endAdornment
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
 	_object.focused = focused
-	local _binding_1 = useInputStyles(_object)
-	local root = _binding_1.root
-	local font = _binding_1.font
-	local margin = _binding_1.margin
-	local shell = _binding_1.shell
-	local box = _binding_1.box
-	local startSlot = _binding_1.startSlot
-	local endSlot = _binding_1.endSlot
-	local helper = _binding_1.helper
-	local errorColorFrame = _binding_1.errorColorFrame
-	local errorColorText = _binding_1.errorColorText
-	local divider = _binding_1.divider
-	local corner = _binding_1.corner
-	local stroke = _binding_1.stroke
+	local _binding_2 = useInputStyles(_object)
+	local root = _binding_2.root
+	local font = _binding_2.font
+	local margin = _binding_2.margin
+	local shell = _binding_2.shell
+	local box = _binding_2.box
+	local startSlot = _binding_2.startSlot
+	local endSlot = _binding_2.endSlot
+	local helper = _binding_2.helper
+	local errorColorFrame = _binding_2.errorColorFrame
+	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 syncInputDraft(focusedRef.current, text, current)
@@ -145,7 +160,8 @@ local function Input(props)
 	for _k, _v in box do
 		_attributes_3[_k] = _v
 	end
-	_attributes_3.Active = not disabled
+	_attributes_3.Active = editable
+	_attributes_3.TextEditable = editable
 	_attributes_3.Text = draft
 	_attributes_3.PlaceholderText = placeholder
 	for _k, _v in cx(hasError and errorColorText) do
@@ -153,6 +169,9 @@ local function Input(props)
 	end
 	_attributes_3.Change = {
 		Text = function(rbx)
+			if not editable then
+				return nil
+			end
 			setDraft(rbx.Text)
 			if focusedRef.current and onInput then
 				onInput(rbx.Text)
@@ -161,6 +180,9 @@ local function Input(props)
 	}
 	_attributes_3.Event = {
 		Focused = function()
+			if not editable then
+				return nil
+			end
 			focusedRef.current = true
 			entered.current = false
 			setFocused(true)
@@ -169,7 +191,7 @@ local function Input(props)
 			end
 		end,
 		ReturnPressedFromOnScreenKeyboard = function(rbx)
-			if entered.current or not onEnterPressed then
+			if not editable or entered.current or not onEnterPressed then
 				return nil
 			end
 			entered.current = true
@@ -179,10 +201,10 @@ local function Input(props)
 			focusedRef.current = false
 			setFocused(false)
 			local committed = rbx.Text
-			if onTextChanged then
+			if editable and onTextChanged then
 				onTextChanged(committed)
 			end
-			if enterPressed and not entered.current and onEnterPressed then
+			if editable and enterPressed and not entered.current and onEnterPressed then
 				onEnterPressed(committed)
 			end
 			entered.current = false
@@ -197,7 +219,7 @@ local function Input(props)
 		end,
 	}
 	local _exp = React.createElement("textbox", _attributes_3)
-	local _condition_5 = endAdornment ~= nil
+	local _condition_5 = loading
 	if _condition_5 then
 		local _attributes_4 = {
 			key = "End",
@@ -205,16 +227,31 @@ local function Input(props)
 		for _k, _v in endSlot do
 			_attributes_4[_k] = _v
 		end
-		_condition_5 = (React.createElement("frame", _attributes_4, adornmentAlign(), endAdornment))
+		_condition_5 = (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 _attributes_4 = {
+			key = "End",
+		}
+		for _k, _v in endSlot do
+			_attributes_4[_k] = _v
+		end
+		_condition_6 = (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)
+	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, {
 		padding = 0,
 		orientation = Orientations.Horizontal,
 		className = cx(divider, hasError and errorColorFrame),
 	}))
-	local _condition_6 = helperText ~= nil
-	if _condition_6 then
+	local _condition_7 = helperText ~= nil
+	if _condition_7 then
 		local _attributes_4 = {
 			key = "HelperText",
 		}
@@ -228,9 +265,9 @@ local function Input(props)
 			_attributes_4[_k] = _v
 		end
 		_attributes_4.Text = helperText
-		_condition_6 = (React.createElement("textlabel", _attributes_4))
+		_condition_7 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_6))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
 end
 local default = Input
 return {

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

@@ -20,7 +20,7 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 	end
 	local width = _param.width
 	if width == nil then
-		width = UDim.new(0, theme.spacing.calc(8))
+		width = UDim.new(0, theme.spacing.calc(12))
 	end
 	local helperText = _param.helperText
 	local clearsTextOnFocus = _param.clearsTextOnFocus
@@ -29,6 +29,10 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 	end
 	local startAdornment = _param.startAdornment
 	local endAdornment = _param.endAdornment
+	local loading = _param.loading
+	if loading == nil then
+		loading = false
+	end
 	local focused = _param.focused
 	if focused == nil then
 		focused = false
@@ -40,7 +44,7 @@ local useInputStyles = componentStyles("Input", function(theme, _param)
 	local size = _param.size
 	local metrics = controlMetrics(theme.density, size)
 	local hasStart = startAdornment ~= nil
-	local hasEnd = endAdornment ~= nil
+	local hasEnd = endAdornment ~= nil or loading
 	local icon = metrics.icon
 	local gap = theme.padding.calc(1)
 	local insets = inputInsets(hasStart, hasEnd, icon, gap)

package/out/ui/packages/numberInput/components/NumberInput.d.ts

@@ -6,9 +6,11 @@ export interface NumberInputProps {
     max?: number;
     step?: number;
     disabled?: boolean;
+    loading?: boolean;
     placeholder?: string;
     width?: UDim;
     size?: ControlSize;
+    reducedMotion?: boolean;
 }
 declare function NumberInput(props: CustomizedProps<Frame, NumberInputProps>): JSX.Element;
 export default NumberInput;

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

@@ -11,9 +11,11 @@ local function NumberInput(props)
 	local max = _binding.max
 	local step = _binding.step
 	local disabled = _binding.disabled
+	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local width = _binding.width
 	local size = _binding.size
+	local reducedMotion = _binding.reducedMotion
 	local className = _binding.className
 	local id = _binding.id
 	local ref = _binding.ref
@@ -29,7 +31,9 @@ local function NumberInput(props)
 	_attributes.placeholder = placeholder
 	_attributes.width = width
 	_attributes.disabled = disabled
+	_attributes.loading = loading
 	_attributes.size = size
+	_attributes.reducedMotion = reducedMotion
 	_attributes.onTextChanged = function(text)
 		local committed = parseNumberDraft(text, min, max, step)
 		if committed ~= nil and committed ~= value then

package/out/ui/packages/select/components/Select.d.ts

@@ -6,6 +6,7 @@ export interface SelectProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    loading?: boolean;
     placeholder?: string;
     searchable?: boolean;
     reducedMotion?: boolean;

package/out/ui/packages/select/components/Select.luau

@@ -14,6 +14,8 @@ local controlMetrics = _theme.controlMetrics
 local cx = _theme.cx
 local useTheme = _theme.useTheme
 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
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
@@ -42,6 +44,10 @@ local function Select(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
 	local placeholder = _binding.placeholder
 	if placeholder == nil then
 		placeholder = ""
@@ -60,7 +66,7 @@ local function Select(props)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local row = controlMetrics(theme.density, size).height
-	local active = canActivate(disabled)
+	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(false)
 	local held, setHeld = useState(false)
@@ -218,6 +224,12 @@ local function Select(props)
 			setHeld(true)
 		end
 	end, { shown })
+	useEffect(function()
+		if loading and open then
+			setOpen(false)
+			setQuery("")
+		end
+	end, { loading, open })
 	useEffect(function()
 		local menu = menuRef.current
 		if not menu or not held then
@@ -305,7 +317,9 @@ local function Select(props)
 			return onKey(input, true)
 		end,
 	}
-	local _attributes_2 = table.clone(styles.padding)
+	local _attributes_2 = table.clone(cx(styles.padding, loading and {
+		PaddingRight = UDim.new(0, theme.padding.calc(1.5) + spinnerPixels(size) + theme.padding.calc(1)),
+	}))
 	setmetatable(_attributes_2, nil)
 	local _exp = React.createElement("uipadding", _attributes_2)
 	local _attributes_3 = table.clone(styles.corner)
@@ -313,7 +327,16 @@ local function Select(props)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
 	local _attributes_4 = table.clone(cx(styles.stroke, focused and styles.focusStroke))
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4))
+	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), loading and (React.createElement(CircularProgress, {
+		size = spinnerPixels(size),
+		thickness = 2,
+		color = theme.palette.text.secondary,
+		reducedMotion = reducedMotion,
+		className = {
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
+		},
+	})))
 	local _condition_1 = (shown or held)
 	if _condition_1 then
 		local _attributes_5 = {

package/out/ui/packages/select/components/Select.styles.luau

@@ -9,7 +9,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = {
-			Size = UDim2.fromOffset(theme.spacing.calc(8), metrics.height),
+			Size = UDim2.fromOffset(theme.spacing.calc(12), metrics.height),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -38,7 +38,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			ZIndex = 20001,
 		},
 		search = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, metrics.height),
 			BackgroundTransparency = 1,
 			ZIndex = 20002,
 		},