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

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 {

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

@@ -35,6 +35,36 @@ local useTooltipStyles = componentStyles("Tooltip", function(theme)
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		shell = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.surface.overlay,
+			BorderSizePixel = 0,
+		},
+		stack = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.default),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		title = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.semibold,
+			TextSize = theme.typography.fontSizes.caption,
+			TextWrapped = true,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		body = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextWrapped = true,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
 	})
 end)
 local default = useTooltipStyles

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

@@ -0,0 +1,4 @@
+export declare function tooltipBox(textWidth: number, textHeight: number, titleWidth: number, titleHeight: number, padX: number, padY: number, gap: number): {
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local function tooltipBox(textWidth, textHeight, titleWidth, titleHeight, padX, padY, gap)
+	local width = math.max(textWidth, titleWidth) + padX * 2
+	local height = textHeight + (if titleHeight > 0 then titleHeight + gap else 0) + padY * 2
+	return {
+		width = width,
+		height = height,
+	}
+end
+return {
+	tooltipBox = tooltipBox,
+}

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

@@ -0,0 +1,2 @@
+/** True when the pointer is still over the host, including a child pin. */
+export declare function pointerInside(originX: number, originY: number, width: number, height: number, x: number, y: number): boolean;

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

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* True when the pointer is still over the host, including a child pin. 
+local function pointerInside(originX, originY, width, height, x, y)
+	if x ~= x or y ~= y then
+		return false
+	end
+	return x >= originX and y >= originY and x <= originX + width and y <= originY + height
+end
+return {
+	pointerInside = pointerInside,
+}

package/out/ui/packages/vectorEditor/components/VectorEditor.luau

@@ -60,6 +60,7 @@ local function VectorEditor(props)
 		setmetatable(_attributes_5, nil)
 		return React.createElement("frame", _attributes_2, _exp_1, _exp_2, React.createElement("frame", _attributes_5, React.createElement(NumberInput, {
 			value = readAxis(value, axis),
+			places = 3,
 			disabled = disabled,
 			width = UDim.new(1, 0),
 			onChange = function(amount)

package/out/ui/packages/weekGrid/components/WeekGrid.d.ts

@@ -0,0 +1,24 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface WeekGridColumn {
+    id: string;
+    label: string;
+}
+export interface WeekGridCell {
+    columnId: string;
+    text?: string;
+}
+export interface WeekGridRow {
+    id: string;
+    label: string;
+    cells: WeekGridCell[];
+}
+export interface WeekGridProps {
+    columns: WeekGridColumn[];
+    rows: WeekGridRow[];
+    narrow?: boolean;
+    day?: number;
+    empty?: string;
+    onCell?: (rowId: string, columnId: string) => void;
+}
+declare function WeekGrid(props: CustomizedProps<Frame, WeekGridProps>): JSX.Element;
+export default WeekGrid;

package/out/ui/packages/weekGrid/components/WeekGrid.luau

@@ -0,0 +1,187 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local weekCellScales = TS.import(script, script.Parent, "weekColumns").weekCellScales
+local function shownColumns(columns, narrow, day)
+	if narrow ~= true then
+		return columns
+	end
+	local index = if day ~= nil and day >= 0 and day < #columns then day else 0
+	local column = columns[index + 1]
+	return if column ~= nil then { column } else {}
+end
+local function readCell(row, columnId)
+	for _, cell in row.cells do
+		if cell.columnId == columnId and cell.text ~= nil and cell.text ~= "" then
+			return cell.text
+		end
+	end
+	return nil
+end
+local function WeekLine(props)
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local font = theme.typography.fontFamilies.default
+	local size = if props.header == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
+	local color = if props.header == true then theme.palette.text.secondary else theme.palette.text.primary
+	local _exp = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _exp_1 = React.createElement("textlabel", {
+		LayoutOrder = 0,
+		Size = UDim2.new(props.nameScale, 0, 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = font,
+		TextSize = size,
+		TextColor3 = color,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextTruncate = Enum.TextTruncate.AtEnd,
+		Text = props.name,
+	})
+	local _exp_2 = props.cells
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#_exp_2)
+	local _callback = function(cell, index)
+		return React.createElement("textbutton", {
+			key = cell.id,
+			LayoutOrder = index + 1,
+			Size = UDim2.new(props.dayScale, 0, 1, 0),
+			BackgroundColor3 = theme.palette.surface.paper,
+			BackgroundTransparency = if cell.blank or props.header == true then 1 else 0,
+			BorderSizePixel = 0,
+			Font = font,
+			TextSize = size,
+			TextColor3 = if cell.blank then theme.palette.text.secondary else color,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			Text = cell.text,
+			AutoButtonColor = props.onCell ~= nil,
+			Event = {
+				Activated = function()
+					local _result = props.onCell
+					if _result ~= nil then
+						_result = _result(cell.id)
+					end
+					return _result
+				end,
+			},
+		})
+	end
+	for _k, _v in _exp_2 do
+		_newValue[_k] = _callback(_v, _k - 1, _exp_2)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", {
+		Size = UDim2.new(1, 0, 0, if props.header == true then 28 else 40),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, _exp, _exp_1, _newValue)
+end
+local function WeekGrid(props)
+	local _binding = props
+	local columns = _binding.columns
+	local rows = _binding.rows
+	local narrow = _binding.narrow
+	local day = _binding.day
+	local empty = _binding.empty
+	if empty == nil then
+		empty = "Off"
+	end
+	local onCell = _binding.onCell
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local visible = shownColumns(columns, narrow, day)
+	local scales = weekCellScales(#columns, narrow)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#visible)
+	local _callback = function(column)
+		return {
+			id = column.id,
+			text = column.label,
+			blank = true,
+		}
+	end
+	for _k, _v in visible do
+		_newValue[_k] = _callback(_v, _k - 1, visible)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local headerCells = _newValue
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "WeekGrid"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = {
+		Size = UDim2.new(1, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_attributes.className = className
+	_attributes.sx = sx
+	local _exp = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Vertical,
+		Padding = UDim.new(0, 4),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _exp_1 = React.createElement(WeekLine, {
+		name = "Crew",
+		nameScale = scales.name,
+		dayScale = scales.day,
+		header = true,
+		cells = headerCells,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue_1 = table.create(#rows)
+	local _callback_1 = function(row)
+		local _attributes_1 = {
+			key = row.id,
+			name = row.label,
+			nameScale = scales.name,
+			dayScale = scales.day,
+		}
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_2 = table.create(#visible)
+		local _callback_2 = function(column)
+			local text = readCell(row, column.id)
+			local _object = {
+				id = column.id,
+			}
+			local _left = "text"
+			local _condition_1 = text
+			if _condition_1 == nil then
+				_condition_1 = empty
+			end
+			_object[_left] = _condition_1
+			_object.blank = text == nil
+			return _object
+		end
+		for _k, _v in visible do
+			_newValue_2[_k] = _callback_2(_v, _k - 1, visible)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_attributes_1.cells = _newValue_2
+		_attributes_1.onCell = if onCell ~= nil then function(columnId)
+			return onCell(row.id, columnId)
+		end else nil
+		return React.createElement(WeekLine, _attributes_1)
+	end
+	for _k, _v in rows do
+		_newValue_1[_k] = _callback_1(_v, _k - 1, rows)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _newValue_1)
+end
+local default = WeekGrid
+return {
+	default = default,
+}

package/out/ui/packages/weekGrid/components/weekColumns.d.ts

@@ -0,0 +1,9 @@
+export interface WeekCellScales {
+    name: number;
+    day: number;
+    count: number;
+}
+/** Narrow keeps one day. A full week uses every column. */
+export declare function weekColumnCount(count: number, narrow?: boolean): number;
+/** Name plus equal day columns. The scales sum to 1 so the row fits its parent. */
+export declare function weekCellScales(count: number, narrow?: boolean): WeekCellScales;

package/out/ui/packages/weekGrid/components/weekColumns.luau

@@ -0,0 +1,25 @@
+-- Compiled with roblox-ts v3.0.0
+--* Narrow keeps one day. A full week uses every column. 
+local function weekColumnCount(count, narrow)
+	if narrow == true then
+		return 1
+	end
+	if count < 1 then
+		return 1
+	end
+	return count
+end
+--* Name plus equal day columns. The scales sum to 1 so the row fits its parent. 
+local function weekCellScales(count, narrow)
+	local days = weekColumnCount(count, narrow)
+	local name = if narrow == true then 0.46 else 0.2
+	return {
+		name = name,
+		day = (1 - name) / days,
+		count = days,
+	}
+end
+return {
+	weekColumnCount = weekColumnCount,
+	weekCellScales = weekCellScales,
+}

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

@@ -0,0 +1,3 @@
+export { default as WeekGrid } from "./components/WeekGrid";
+export { WeekGridCell, WeekGridColumn, WeekGridProps, WeekGridRow } from "./components/WeekGrid";
+export { weekCellScales, weekColumnCount } from "./components/weekColumns";

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

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.WeekGrid = TS.import(script, script, "components", "WeekGrid").default
+local _weekColumns = TS.import(script, script, "components", "weekColumns")
+exports.weekCellScales = _weekColumns.weekCellScales
+exports.weekColumnCount = _weekColumns.weekColumnCount
+return exports