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

package/out/ui/packages/timeline/components/Timeline.luau

@@ -0,0 +1,99 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local useTimelineStyles = TS.import(script, script.Parent, "Timeline.styles").default
+local _timelineRail = TS.import(script, script.Parent, "timelineRail")
+local timelineRail = _timelineRail.timelineRail
+local timelineTone = _timelineRail.timelineTone
+local function Timeline(props)
+	local _binding = props
+	local items = _binding.items
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useTimelineStyles()
+	local count = #items
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Timeline"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item, index)
+		local tone = timelineTone(item.tone)
+		local mark = if tone == "done" then styles.done elseif tone == "active" then styles.active elseif tone == "error" then styles.error else styles.pending
+		local caption = item.caption
+		local _attributes_2 = {
+			key = `{item.title}-{index}`,
+		}
+		for _k, _v in styles.item do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = index
+		local _attributes_3 = table.clone(styles.row)
+		setmetatable(_attributes_3, nil)
+		local _exp_1 = React.createElement("uilistlayout", _attributes_3)
+		local _attributes_4 = table.clone(styles.rail)
+		setmetatable(_attributes_4, nil)
+		local _result
+		if timelineRail(index, count) then
+			local _attributes_5 = table.clone(styles.line)
+			setmetatable(_attributes_5, nil)
+			_result = React.createElement("frame", _attributes_5)
+		else
+			_result = nil
+		end
+		local _attributes_5 = table.clone(cx(styles.dot, mark))
+		setmetatable(_attributes_5, nil)
+		local _exp_2 = React.createElement("frame", _attributes_4, _result, React.createElement("frame", _attributes_5, React.createElement("uicorner", {
+			CornerRadius = UDim.new(1, 0),
+		})))
+		local _attributes_6 = table.clone(styles.body)
+		setmetatable(_attributes_6, nil)
+		local _attributes_7 = table.clone(styles.bodyPad)
+		setmetatable(_attributes_7, nil)
+		local _exp_3 = React.createElement("uipadding", _attributes_7)
+		local _attributes_8 = table.clone(styles.bodyList)
+		setmetatable(_attributes_8, nil)
+		local _exp_4 = React.createElement("uilistlayout", _attributes_8)
+		local _attributes_9 = table.clone(styles.title)
+		setmetatable(_attributes_9, nil)
+		_attributes_9.Text = item.title
+		_attributes_9.LayoutOrder = 0
+		local _exp_5 = React.createElement("textlabel", _attributes_9)
+		local _result_1
+		if caption ~= nil and #caption > 0 then
+			local _attributes_10 = table.clone(styles.caption)
+			setmetatable(_attributes_10, nil)
+			_attributes_10.Text = caption
+			_attributes_10.LayoutOrder = 1
+			_result_1 = (React.createElement("textlabel", _attributes_10))
+		else
+			_result_1 = nil
+		end
+		return React.createElement("frame", _attributes_2, _exp_1, _exp_2, React.createElement("frame", _attributes_6, _exp_3, _exp_4, _exp_5, _result_1))
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+end
+local default = Timeline
+return {
+	default = default,
+}

package/out/ui/packages/timeline/components/Timeline.styles.d.ts

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

package/out/ui/packages/timeline/components/Timeline.styles.luau

@@ -0,0 +1,106 @@
+-- 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 useTimelineStyles = componentStyles("Timeline", function(theme)
+	local dot = theme.spacing.calc(1.5)
+	local rail = theme.spacing.calc(2)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		},
+		item = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		row = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			ItemLineAlignment = Enum.ItemLineAlignment.Stretch,
+			Padding = UDim.new(0, theme.spacing.calc(1)),
+		},
+		rail = {
+			Size = UDim2.fromOffset(rail, 0),
+			LayoutOrder = 0,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		dot = {
+			AnchorPoint = Vector2.new(0.5, 0),
+			Position = UDim2.new(0.5, 0, 0, 2),
+			Size = UDim2.fromOffset(dot, dot),
+			BorderSizePixel = 0,
+			ZIndex = 2,
+		},
+		done = {
+			BackgroundColor3 = theme.palette.status.success.main,
+		},
+		active = {
+			BackgroundColor3 = theme.palette.primary.main,
+		},
+		pending = {
+			BackgroundColor3 = theme.palette.text.disabled,
+		},
+		error = {
+			BackgroundColor3 = theme.palette.status.error.main,
+		},
+		line = {
+			AnchorPoint = Vector2.new(0.5, 0),
+			Position = UDim2.new(0.5, 0, 0, dot + 2),
+			Size = UDim2.new(0, 2, 1, -(dot + 2)),
+			BackgroundColor3 = theme.palette.divider,
+			BorderSizePixel = 0,
+			ZIndex = 1,
+		},
+		body = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		bodyPad = {
+			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
+		},
+		bodyList = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		title = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		caption = {
+			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 = useTimelineStyles
+return {
+	default = default,
+}

package/out/ui/packages/timeline/components/timelineRail.d.ts

@@ -0,0 +1,4 @@
+export type TimelineTone = "done" | "active" | "pending" | "error";
+export declare function timelineTone(tone?: string): TimelineTone;
+/** Connector under an item. The last item, and a list shorter than two, has none. */
+export declare function timelineRail(index: number, count: number): boolean;

package/out/ui/packages/timeline/components/timelineRail.luau

@@ -0,0 +1,15 @@
+-- Compiled with roblox-ts v3.0.0
+local function timelineTone(tone)
+	if tone == "done" or tone == "active" or tone == "error" or tone == "pending" then
+		return tone
+	end
+	return "pending"
+end
+--* Connector under an item. The last item, and a list shorter than two, has none. 
+local function timelineRail(index, count)
+	return index >= 0 and count > 1 and index < count - 1
+end
+return {
+	timelineTone = timelineTone,
+	timelineRail = timelineRail,
+}

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

@@ -0,0 +1,3 @@
+export { default as Timeline } from "./components/Timeline";
+export { TimelineItem, TimelineProps } from "./components/Timeline";
+export { timelineRail, timelineTone, TimelineTone } from "./components/timelineRail";

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

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

package/out/ui/packages/toast/components/Toast.d.ts

@@ -8,6 +8,7 @@ export interface ToastProps {
     toggledAt?: number;
     action?: string;
     onAction?: () => void;
+    edge?: "top" | "bottom";
 }
 declare function Toast(props: CustomizedProps<Frame, ToastProps>): JSX.Element;
 export default Toast;

package/out/ui/packages/toast/components/Toast.luau

@@ -5,11 +5,15 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
-local DEFAULT_THEME = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DEFAULT_THEME
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local DEFAULT_THEME = _theme.DEFAULT_THEME
+local useTheme = _theme.useTheme
 local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Directions
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local useToastStyles = TS.import(script, script.Parent, "Toast.styles").default
+local toastWrap = TS.import(script, script.Parent, "toastPlace").toastWrap
 local TWEEN_DURATION = 0.5
 local function Toast(props)
 	local _binding = props
@@ -32,7 +36,47 @@ local function Toast(props)
 	local actionStyle = _binding_1.action
 	local activePosition = _binding_1.activePosition
 	local inActivePosition = _binding_1.inActivePosition
+	local _binding_2 = useTheme()
+	local theme = _binding_2.theme
 	local frameRef = useRef()
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local _condition = theme.typography.fontSizes.body
+	if _condition == nil then
+		_condition = 14
+	end
+	local textSize = _condition
+	local actionSlot = if action ~= nil and #action > 0 then theme.spacing.calc(8) else 0
+	local box = theme.spacing.calc(20) - theme.padding.calc(4) - actionSlot
+	local bounds = TextService:GetTextSize(text, textSize, font, Vector2.new(10000, 100))
+	local wrap = toastWrap(bounds.X, box)
+	local pad = theme.padding.calc(2)
+	local _result
+	if wrap then
+		local _object = table.clone(container)
+		setmetatable(_object, nil)
+		_object.AutomaticSize = Enum.AutomaticSize.Y
+		_result = _object
+	else
+		_result = container
+	end
+	local boxStyle = _result
+	local _result_1
+	if wrap then
+		local _object = table.clone(label)
+		setmetatable(_object, nil)
+		_object.TextWrapped = true
+		_object.TextTruncate = Enum.TextTruncate.None
+		_object.AutomaticSize = Enum.AutomaticSize.Y
+		_object.Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 0, 0)
+		_object.AnchorPoint = Vector2.new(0, 0)
+		_object.Position = UDim2.new(0, pad, 0, pad)
+		_object.TextXAlignment = Enum.TextXAlignment.Left
+		_object.TextYAlignment = Enum.TextYAlignment.Top
+		_result_1 = _object
+	else
+		_result_1 = label
+	end
+	local labelStyle = _result_1
 	local tween = function(direction)
 		local frame = frameRef.current
 		if not frame then
@@ -64,11 +108,11 @@ local function Toast(props)
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Toast"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "Toast"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = function(instance)
 		frameRef.current = instance
 		if ref == nil then
@@ -80,7 +124,7 @@ local function Toast(props)
 		end
 		ref.current = instance
 	end
-	_attributes.base = container
+	_attributes.base = boxStyle
 	_attributes.className = className
 	_attributes.sx = sx
 	local _exp = React.createElement("uicorner", {
@@ -88,16 +132,19 @@ local function Toast(props)
 		CornerRadius = UDim.new(0, DEFAULT_THEME.shape.borderRadius),
 	})
 	local _exp_1 = React.createElement(Shadow)
+	local _exp_2 = wrap and React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, pad),
+	})
 	local _attributes_1 = {
 		key = "Label",
 	}
-	for _k, _v in label do
+	for _k, _v in labelStyle do
 		_attributes_1[_k] = _v
 	end
 	_attributes_1.Text = text
-	local _exp_2 = React.createElement("textlabel", _attributes_1)
-	local _condition_1 = action ~= nil and #action > 0
-	if _condition_1 then
+	local _exp_3 = React.createElement("textlabel", _attributes_1)
+	local _condition_2 = action ~= nil and #action > 0
+	if _condition_2 then
 		local _attributes_2 = {
 			key = "Action",
 		}
@@ -116,7 +163,7 @@ local function Toast(props)
 				end
 			end,
 		}
-		_condition_1 = (React.createElement("textbutton", _attributes_2))
+		_condition_2 = (React.createElement("textbutton", _attributes_2))
 	end
 	local _attributes_2 = {
 		key = "Close",
@@ -132,7 +179,7 @@ local function Toast(props)
 			end
 		end,
 	}
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("imagebutton", _attributes_2))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_2, React.createElement("imagebutton", _attributes_2))
 end
 local default = Toast
 return {

package/out/ui/packages/toast/components/Toast.styles.luau

@@ -6,12 +6,14 @@ local componentStyles = _theme.componentStyles
 local DEFAULT_THEME = _theme.DEFAULT_THEME
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local ToastVariants = TS.import(script, script.Parent.Parent, "enums", "ToastVariants").default
+local toastPlace = TS.import(script, script.Parent, "toastPlace").toastPlace
 local useToastStyles = componentStyles("Toast", function(theme, _param)
 	local variant = _param.variant
 	if variant == nil then
 		variant = ToastVariants.default
 	end
 	local action = _param.action
+	local edge = _param.edge
 	local getToastColors = function()
 		repeat
 			if variant == (ToastVariants.success) then
@@ -41,14 +43,15 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 	local toastColors = getToastColors()
 	local hasAction = action ~= nil and #action > 0
 	local actionSlot = if hasAction then theme.spacing.calc(8) else 0
-	local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
-	local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
+	local place = toastPlace(edge, DEFAULT_THEME.padding.calc(2), DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
+	local ACTIVE_POSITION = UDim2.new(0.5, 0, place.activeY, place.activeOffset)
+	local INACTIVE_POSITION = UDim2.new(0.5, 0, place.idleY, place.idleOffset)
 	return createStyles({
 		container = {
 			Size = UDim2.new(0, theme.spacing.calc(20), 0, theme.spacing.calc(4)),
 			Position = ACTIVE_POSITION,
 			BackgroundColor3 = toastColors.background,
-			AnchorPoint = Vector2.new(0.5, 1),
+			AnchorPoint = Vector2.new(0.5, place.anchorY),
 			BorderSizePixel = 0,
 			ZIndex = 50000,
 		},

package/out/ui/packages/toast/components/toastPlace.d.ts

@@ -0,0 +1,12 @@
+export type ToastEdge = "top" | "bottom";
+export interface ToastPlace {
+    anchorY: number;
+    activeY: number;
+    activeOffset: number;
+    idleY: number;
+    idleOffset: number;
+}
+/** Bottom stays the default. Top sits on the upper edge and hides above the frame. */
+export declare function toastPlace(edge: ToastEdge | undefined, inset: number, hidden: number): ToastPlace;
+/** A line wider than the toast wraps. A short line stays one row. */
+export declare function toastWrap(textWidth: number, box: number): boolean;

package/out/ui/packages/toast/components/toastPlace.luau

@@ -0,0 +1,31 @@
+-- Compiled with roblox-ts v3.0.0
+--* Bottom stays the default. Top sits on the upper edge and hides above the frame. 
+local function toastPlace(edge, inset, hidden)
+	if edge == "top" then
+		return {
+			anchorY = 0,
+			activeY = 0,
+			activeOffset = inset,
+			idleY = 0,
+			idleOffset = -hidden,
+		}
+	end
+	return {
+		anchorY = 1,
+		activeY = 1,
+		activeOffset = -inset,
+		idleY = 1,
+		idleOffset = hidden,
+	}
+end
+--* A line wider than the toast wraps. A short line stays one row. 
+local function toastWrap(textWidth, box)
+	if box <= 0 then
+		return false
+	end
+	return textWidth > box
+end
+return {
+	toastPlace = toastPlace,
+	toastWrap = toastWrap,
+}

package/out/ui/packages/tooltip/components/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import { CustomizedProps } from "../../../../theme/index";
 export interface TooltipProps {
     text: string;
+    title?: string;
     delay?: number;
 }
 declare function Tooltip(props: CustomizedProps<Frame, TooltipProps>): JSX.Element;

package/out/ui/packages/tooltip/components/Tooltip.luau

@@ -10,9 +10,12 @@ local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "t
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local useTooltipStyles = TS.import(script, script.Parent, "Tooltip.styles").default
+local tooltipBox = TS.import(script, script.Parent, "tooltipBox").tooltipBox
+local pointerInside = TS.import(script, script.Parent, "tooltipPointer").pointerInside
 local function Tooltip(props)
 	local _binding = props
 	local text = _binding.text
+	local title = _binding.title
 	local delay = _binding.delay
 	if delay == nil then
 		delay = 0.4
@@ -36,9 +39,36 @@ local function Tooltip(props)
 	end
 	local textSize = _condition
 	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
-	local textBounds = TextService:GetTextSize(text, textSize, font, Vector2.new(theme.spacing.calc(24), 10000))
-	local tipWidth = textBounds.X + padX * 2
-	local tipHeight = textBounds.Y + padY * 2
+	local _condition_1 = title
+	if _condition_1 == nil then
+		_condition_1 = ""
+	end
+	local heading = _condition_1
+	local limit = Vector2.new(theme.spacing.calc(24), 10000)
+	local textBounds = TextService:GetTextSize(text, textSize, font, limit)
+	local titleFont = theme.typography.fontFamilies.semibold or font
+	local titleBounds = if heading ~= "" then TextService:GetTextSize(heading, textSize, titleFont, limit) else nil
+	local _exp = textBounds.X
+	local _exp_1 = textBounds.Y
+	local _result = titleBounds
+	if _result ~= nil then
+		_result = _result.X
+	end
+	local _condition_2 = _result
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local _result_1 = titleBounds
+	if _result_1 ~= nil then
+		_result_1 = _result_1.Y
+	end
+	local _condition_3 = _result_1
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local box = tooltipBox(_exp, _exp_1, _condition_2, _condition_3, padX, padY, if heading ~= "" then padY else 0)
+	local tipWidth = box.width
+	local tipHeight = box.height
 	local anchor, setAnchor = useState()
 	local shown, setShown = useState(false)
 	local pending = useRef()
@@ -54,11 +84,11 @@ local function Tooltip(props)
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition_1 = id
-	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-		_condition_1 = "Tooltip"
+	local _condition_4 = id
+	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4 ~= "" and _condition_4) then
+		_condition_4 = "Tooltip"
 	end
-	_attributes.key = _condition_1
+	_attributes.key = _condition_4
 	_attributes.hostRef = ref
 	_attributes.base = styles.root
 	_attributes.className = className
@@ -72,39 +102,87 @@ local function Tooltip(props)
 				setShown(true)
 			end)
 		end,
-		MouseLeave = function()
+		MouseLeave = function(rbx, x, y)
+			if pointerInside(rbx.AbsolutePosition.X, rbx.AbsolutePosition.Y, rbx.AbsoluteSize.X, rbx.AbsoluteSize.Y, x, y) then
+				return nil
+			end
 			cancel()
 			setShown(false)
 		end,
 	}
-	local _exp = children
-	local _condition_2 = shown and text ~= ""
-	if _condition_2 then
-		local _attributes_1 = {
-			key = "Tip",
-		}
-		for _k, _v in styles.label do
-			_attributes_1[_k] = _v
+	local _exp_2 = children
+	local _condition_5 = shown and (text ~= "" or heading ~= "")
+	if _condition_5 then
+		local _result_2
+		if heading == "" then
+			local _attributes_1 = {
+				key = "Tip",
+			}
+			for _k, _v in styles.label do
+				_attributes_1[_k] = _v
+			end
+			_attributes_1.Text = text
+			_attributes_1.Size = UDim2.fromScale(1, 1)
+			_attributes_1.AutomaticSize = Enum.AutomaticSize.None
+			_attributes_1.TextWrapped = true
+			local _attributes_2 = table.clone(styles.padding)
+			setmetatable(_attributes_2, nil)
+			local _exp_3 = React.createElement("uipadding", _attributes_2)
+			local _attributes_3 = table.clone(styles.corner)
+			setmetatable(_attributes_3, nil)
+			local _exp_4 = React.createElement("uicorner", _attributes_3)
+			local _attributes_4 = table.clone(styles.stroke)
+			setmetatable(_attributes_4, nil)
+			_result_2 = (React.createElement("textlabel", _attributes_1, _exp_3, _exp_4, React.createElement("uistroke", _attributes_4)))
+		else
+			local _attributes_1 = {
+				key = "Tip",
+			}
+			for _k, _v in styles.shell do
+				_attributes_1[_k] = _v
+			end
+			local _attributes_2 = table.clone(styles.padding)
+			setmetatable(_attributes_2, nil)
+			local _exp_3 = React.createElement("uipadding", _attributes_2)
+			local _attributes_3 = table.clone(styles.corner)
+			setmetatable(_attributes_3, nil)
+			local _exp_4 = React.createElement("uicorner", _attributes_3)
+			local _attributes_4 = table.clone(styles.stroke)
+			setmetatable(_attributes_4, nil)
+			local _exp_5 = React.createElement("uistroke", _attributes_4)
+			local _attributes_5 = table.clone(styles.stack)
+			setmetatable(_attributes_5, nil)
+			local _exp_6 = React.createElement("uilistlayout", _attributes_5)
+			local _attributes_6 = {
+				key = "Title",
+			}
+			for _k, _v in styles.title do
+				_attributes_6[_k] = _v
+			end
+			_attributes_6.Text = heading
+			_attributes_6.LayoutOrder = 0
+			local _exp_7 = React.createElement("textlabel", _attributes_6)
+			local _condition_6 = text ~= ""
+			if _condition_6 then
+				local _attributes_7 = {
+					key = "Body",
+				}
+				for _k, _v in styles.body do
+					_attributes_7[_k] = _v
+				end
+				_attributes_7.Text = text
+				_attributes_7.LayoutOrder = 1
+				_condition_6 = React.createElement("textlabel", _attributes_7)
+			end
+			_result_2 = (React.createElement("frame", _attributes_1, _exp_3, _exp_4, _exp_5, _exp_6, _exp_7, _condition_6))
 		end
-		_attributes_1.Text = text
-		_attributes_1.Size = UDim2.fromScale(1, 1)
-		_attributes_1.AutomaticSize = Enum.AutomaticSize.None
-		_attributes_1.TextWrapped = true
-		local _attributes_2 = table.clone(styles.padding)
-		setmetatable(_attributes_2, nil)
-		local _exp_1 = React.createElement("uipadding", _attributes_2)
-		local _attributes_3 = table.clone(styles.corner)
-		setmetatable(_attributes_3, nil)
-		local _exp_2 = React.createElement("uicorner", _attributes_3)
-		local _attributes_4 = table.clone(styles.stroke)
-		setmetatable(_attributes_4, nil)
-		_condition_2 = (React.createElement(Popup, {
+		_condition_5 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredWidth = tipWidth,
 			preferredHeight = tipHeight,
-		}, React.createElement("textlabel", _attributes_1, _exp_1, _exp_2, React.createElement("uistroke", _attributes_4))))
+		}, _result_2))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp_2, _condition_5)
 end
 local default = Tooltip
 return {