@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

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

@@ -1,9 +1,11 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
-local makeStyles = _theme.makeStyles
-local useInputStyles = makeStyles(function(theme, _param)
+local componentStyles = _theme.componentStyles
+local inputInsets = TS.import(script, script.Parent, "inputInsets").inputInsets
+local useInputStyles = componentStyles("Input", function(theme, _param)
 	local color = _param.color
 	if color == nil then
 		color = "primary"
@@ -18,28 +20,48 @@ local useInputStyles = makeStyles(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
 	if clearsTextOnFocus == nil then
 		clearsTextOnFocus = false
 	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
+	end
+	local hasError = _param.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	local hasStart = startAdornment ~= nil
+	local hasEnd = endAdornment ~= nil or loading
+	local icon = metrics.icon
+	local gap = theme.padding.calc(1)
+	local insets = inputInsets(hasStart, hasEnd, icon, gap)
+	local fieldHeight = metrics.height + (if variant == "standard" then 0 else theme.padding.calc(1))
+	local accent = if color == "primary" then theme.palette.primary.main else theme.palette.text.primary
+	local focusAccent = if hasError then theme.palette.status.error.main else theme.palette.focus
 	local makeRootStyles = function()
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
 		defaultStyles.BorderSizePixel = 0
-		defaultStyles.Size = UDim2.new(width.Scale, width.Offset, 0, if helperText ~= nil then theme.spacing.calc(4) else theme.spacing.calc(2))
-		-- Increase size vertically to account for margin
+		defaultStyles.Size = UDim2.new(width.Scale, width.Offset, 0, if helperText ~= nil then fieldHeight + metrics.height else fieldHeight)
 		repeat
-			if margin == "none" then
-				break
-			end
+			local _fallthrough = false
 			if margin == "dense" then
-				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
-				break
+				_fallthrough = true
 			end
-			if margin == "normal" then
+			if _fallthrough or margin == "normal" then
 				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
 				break
 			end
@@ -48,35 +70,33 @@ local useInputStyles = makeStyles(function(theme, _param)
 		defaultStyles.ZIndex = 10000
 		return defaultStyles
 	end
+	local makeShellStyles = function()
+		local shell = {
+			Size = UDim2.new(1, 0, 0, fieldHeight),
+			Position = UDim2.new(0, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 11000,
+		}
+		if variant == "filled" then
+			shell.BackgroundColor3 = theme.palette.surface.input
+			shell.BackgroundTransparency = 0
+		elseif variant == "outlined" then
+			shell.BackgroundColor3 = theme.palette.surface.input
+			shell.BackgroundTransparency = 0.35
+		end
+		return shell
+	end
 	local makeBoxStyles = function()
 		local defaultStyles = {}
-		defaultStyles.BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
+		defaultStyles.BackgroundTransparency = 1
+		defaultStyles.BorderSizePixel = 0
 		defaultStyles.PlaceholderColor3 = theme.palette.text.secondary
-		defaultStyles.Position = UDim2.new(0, 0, 0, 0)
-		defaultStyles.Size = UDim2.new(1, 0, 0, theme.spacing.calc(2))
-		repeat
-			if variant == "filled" then
-				defaultStyles.BackgroundTransparency = 0
-				defaultStyles.BorderSizePixel = 0
-				break
-			end
-			if variant == "outlined" then
-				defaultStyles.TextColor3 = theme.palette.text.primary
-				defaultStyles.BackgroundTransparency = 1
-				defaultStyles.BorderSizePixel = theme.options.constants.borders.default
-				break
-			end
-			if variant == "standard" then
-				defaultStyles.TextColor3 = theme.palette.text.primary
-				defaultStyles.BackgroundTransparency = 1
-				defaultStyles.BorderSizePixel = 0
-				break
-			end
-			defaultStyles.BackgroundTransparency = 0
-			defaultStyles.BorderSizePixel = 0
-			break
-		until true
+		defaultStyles.TextColor3 = theme.palette.text.primary
+		defaultStyles.Position = UDim2.new(0, insets.left, 0, 0)
+		defaultStyles.Size = UDim2.new(1, -(insets.left + insets.right), 1, 0)
 		defaultStyles.TextXAlignment = Enum.TextXAlignment.Left
+		defaultStyles.TextTruncate = Enum.TextTruncate.AtEnd
 		defaultStyles.ClearTextOnFocus = clearsTextOnFocus
 		defaultStyles.ZIndex = 12000
 		return defaultStyles
@@ -85,15 +105,9 @@ local useInputStyles = makeStyles(function(theme, _param)
 		local defaultStyles = {}
 		defaultStyles.BackgroundTransparency = 1
 		defaultStyles.BorderSizePixel = 0
-		-- Center in root
 		defaultStyles.Position = UDim2.new(0.5, 0, 0.5, 0)
 		defaultStyles.AnchorPoint = Vector2.new(0.5, 0.5)
-		-- Margin controls vertical spacing around the input component
 		repeat
-			if margin == "none" then
-				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
-				break
-			end
 			if margin == "dense" then
 				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(2), 1, -theme.padding.calc(2))
 				break
@@ -102,20 +116,33 @@ local useInputStyles = makeStyles(function(theme, _param)
 				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4))
 				break
 			end
-			defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
+			defaultStyles.Size = UDim2.new(1, 0, 1, 0)
 			break
 		until true
 		defaultStyles.ZIndex = 11000
 		return defaultStyles
 	end
+	local slot = function(side)
+		return {
+			Size = UDim2.new(0, icon, 0, icon),
+			Position = UDim2.new(if side == "start" then 0 else 1, if side == "start" then gap else -gap, 0.5, 0),
+			AnchorPoint = Vector2.new(if side == "start" then 0 else 1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 13000,
+		}
+	end
 	return createStyles({
 		root = makeRootStyles(),
 		font = {
-			TextSize = theme.typography.fontSizes.button,
+			TextSize = metrics.font,
 			Font = theme.typography.fontFamilies.default,
 		},
 		margin = makeMarginStyles(),
+		shell = makeShellStyles(),
 		box = makeBoxStyles(),
+		startSlot = slot("start"),
+		endSlot = slot("end"),
 		helper = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			Position = UDim2.new(0, 0, 1, 0),
@@ -127,25 +154,24 @@ local useInputStyles = makeStyles(function(theme, _param)
 			ZIndex = 11000,
 		},
 		errorColorFrame = {
-			BackgroundColor3 = theme.palette.error.main,
-			BorderColor3 = theme.palette.error.main,
+			BackgroundColor3 = theme.palette.status.error.main,
+			BorderColor3 = theme.palette.status.error.main,
 		},
 		errorColorText = {
-			TextColor3 = theme.palette.error.main,
-			BackgroundColor3 = theme.palette.error.main,
-			BorderColor3 = theme.palette.error.main,
+			TextColor3 = theme.palette.status.error.main,
 		},
 		divider = {
-			Position = UDim2.new(0, 0, 0, theme.spacing.calc(2)),
-			BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
+			Position = UDim2.new(0, 0, 0, fieldHeight),
+			BackgroundColor3 = accent,
 			ZIndex = 11000,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
-			Transparency = 0,
+			Color = if hasError then theme.palette.status.error.main elseif focused then focusAccent else accent,
+			Transparency = if focused or hasError then 0 else 0.45,
+			Thickness = if focused then 1.5 else 1,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 	})

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

@@ -0,0 +1 @@
+export declare function syncInputDraft(focused: boolean, text: string | undefined, draft: string): string;

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

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local function syncInputDraft(focused, text, draft)
+	local _result
+	if focused then
+		_result = draft
+	else
+		local _condition = text
+		if _condition == nil then
+			_condition = ""
+		end
+		_result = _condition
+	end
+	return _result
+end
+return {
+	syncInputDraft = syncInputDraft,
+}

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

@@ -0,0 +1,4 @@
+export declare function inputInsets(hasStart: boolean, hasEnd: boolean, icon: number, gap: number): {
+    left: number;
+    right: number;
+};

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

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function inputInsets(hasStart, hasEnd, icon, gap)
+	return {
+		left = gap + (if hasStart then icon + gap else 0),
+		right = gap + (if hasEnd then icon + gap else 0),
+	}
+end
+return {
+	inputInsets = inputInsets,
+}

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

@@ -2,9 +2,9 @@
 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 makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useGridStyles = makeStyles(function(_, props)
+local useGridStyles = componentStyles("Grid", function(_, props)
 	return createStyles({
 		baseGrid = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -59,6 +59,7 @@ local function Grid(props)
 		verticalAlignment = Enum.VerticalAlignment.Top
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -89,6 +90,11 @@ local function Grid(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "GridLayout",
 	}

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

@@ -2,9 +2,9 @@
 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 makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useListStyles = makeStyles(function(_, props)
+local useListStyles = componentStyles("List", function(_, props)
 	return createStyles({
 		baseList = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -59,6 +59,7 @@ local function List(props)
 		verticalFlex = Enum.UIFlexAlignment.None
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -89,6 +90,11 @@ local function List(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "ListLayout",
 	}

package/out/ui/packages/listItem/components/ListItem.d.ts

@@ -0,0 +1,9 @@
+export interface ListItemProps {
+    text: string;
+    secondary?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onActivated?: () => void;
+}
+declare function ListItem(props: ListItemProps): JSX.Element;
+export default ListItem;

package/out/ui/packages/listItem/components/ListItem.luau

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
+local function ListItem(props)
+	local _binding = props
+	local text = _binding.text
+	local secondary = _binding.secondary
+	local selected = _binding.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _binding.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local onActivated = _binding.onActivated
+	local styles = useListItemStyles({
+		selected = selected,
+		disabled = disabled,
+	})
+	local _attributes = {
+		key = "ListItem",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	_attributes.Event = {
+		Activated = function()
+			if not disabled and onActivated ~= nil then
+				onActivated()
+			end
+		end,
+	}
+	local _attributes_1 = table.clone(styles.padding)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	local _attributes_3 = {
+		key = "Primary",
+	}
+	for _k, _v in styles.primary do
+		_attributes_3[_k] = _v
+	end
+	_attributes_3.Text = text
+	local _exp_2 = React.createElement("textlabel", _attributes_3)
+	local _result
+	if secondary ~= nil and #secondary > 0 then
+		local _attributes_4 = {
+			key = "Secondary",
+		}
+		for _k, _v in styles.secondary do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Text = secondary
+		_result = (React.createElement("textlabel", _attributes_4))
+	else
+		_result = nil
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _result)
+end
+local default = ListItem
+return {
+	default = default,
+}

package/out/ui/packages/listItem/components/ListItem.styles.d.ts

@@ -0,0 +1,5 @@
+declare const useListItemStyles: (props: {
+    selected?: boolean;
+    disabled?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useListItemStyles;

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -0,0 +1,64 @@
+-- Compiled with roblox-ts v3.0.0
+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 useListItemStyles = componentStyles("ListItem", function(theme, _param)
+	local selected = _param.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.action.selected,
+			BackgroundTransparency = if selected then 0 else 1,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Active = not disabled,
+			Selectable = not disabled,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.padding.calc(1)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		primary = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		secondary = {
+			LayoutOrder = 2,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+	})
+end)
+local default = useListItemStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as ListItem } from "./components/ListItem";
+export { ListItemProps } from "./components/ListItem";

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

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ListItem = TS.import(script, script, "components", "ListItem").default
+return exports

package/out/ui/packages/loadingStroke/components/LoadingStroke.luau

@@ -12,6 +12,7 @@ local function LoadingStroke(props)
 		animating = false
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -31,6 +32,9 @@ local function LoadingStroke(props)
 			end
 		end
 	end, { animating })
+	-- Decorative shimmer; not a semantic text/surface token.
+	local stroke = Color3.fromRGB(255, 255, 255)
+	local mid = Color3.fromRGB(235, 235, 235)
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -38,7 +42,7 @@ local function LoadingStroke(props)
 	end
 	_attributes.key = _condition
 	_attributes.ref = ref
-	_attributes.Color = Color3.fromRGB(255, 255, 255)
+	_attributes.Color = stroke
 	_attributes.Thickness = 2
 	_attributes.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
 	if className then
@@ -46,11 +50,16 @@ local function LoadingStroke(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	return React.createElement("uistroke", _attributes, React.createElement("uigradient", {
 		ref = gradientRef,
 		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 1) }),
 		Rotation = 0,
-		Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)), ColorSequenceKeypoint.new(0.5, Color3.fromRGB(235, 235, 235)), ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255)) }),
+		Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, stroke), ColorSequenceKeypoint.new(0.5, mid), ColorSequenceKeypoint.new(1, stroke) }),
 	}), children)
 end
 local default = LoadingStroke

package/out/ui/packages/menu/components/Menu.d.ts

@@ -0,0 +1,14 @@
+export interface MenuItem {
+    id: string;
+    text: string;
+    disabled?: boolean;
+}
+export interface MenuProps {
+    anchor?: GuiObject;
+    open: boolean;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+    onClose: () => void;
+}
+declare function Menu(props: MenuProps): JSX.Element | undefined;
+export default Menu;

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

@@ -0,0 +1,60 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
+local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
+local ROW = 28
+local function Menu(props)
+	local _binding = props
+	local anchor = _binding.anchor
+	local open = _binding.open
+	local items = _binding.items
+	local onSelect = _binding.onSelect
+	local onClose = _binding.onClose
+	local styles = useMenuStyles()
+	if not open then
+		return nil
+	end
+	local _attributes = {
+		key = "Surface",
+	}
+	for _k, _v in styles.surface do
+		_attributes[_k] = _v
+	end
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return React.createElement(ListItem, {
+			key = item.id,
+			text = item.text,
+			disabled = item.disabled,
+			onActivated = function()
+				if item.disabled == true then
+					return nil
+				end
+				onSelect(item.id)
+				onClose()
+			end,
+		})
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(Popup, {
+		anchor = anchor,
+		preferredHeight = #items * ROW,
+		onDismiss = onClose,
+	}, React.createElement("frame", _attributes, _exp, _exp_1, _newValue))
+end
+local default = Menu
+return {
+	default = default,
+}

package/out/ui/packages/menu/components/Menu.styles.d.ts

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

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

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+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 useMenuStyles = componentStyles("Menu", function(theme)
+	return createStyles({
+		surface = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+	})
+end)
+local default = useMenuStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as Menu } from "./components/Menu";
+export { MenuProps, MenuItem } from "./components/Menu";

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

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Menu = TS.import(script, script, "components", "Menu").default
+return exports

package/out/ui/packages/modal/components/Modal.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+export interface ModalProps {
+    host?: Instance;
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+}
+declare function Modal(props: ModalProps): JSX.Element | undefined;
+export default Modal;