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

package/out/ui/packages/accordion/components/Accordion.luau

@@ -2,16 +2,25 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local useState = _react.useState
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+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 controlMetrics = _theme.controlMetrics
+local cx = _theme.cx
+local useTheme = _theme.useTheme
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
-local accordionGlyph = _accordionOpen.accordionGlyph
-local accordionOpen = _accordionOpen.accordionOpen
+local Collapse = TS.import(script, script.Parent.Parent.Parent, "collapse").Collapse
+local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
+local accordionNote = TS.import(script, script.Parent, "accordionNote").accordionNote
+local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
 	local title = _binding.title
+	local note = _binding.note
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
 	local disabled = _binding.disabled
@@ -23,11 +32,27 @@ local function Accordion(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local localOpen, setLocalOpen = useState(defaultOpen == true)
+	local hovering, setHovering = useState(false)
 	local open = accordionOpen(localOpen, controlled)
+	local summary = accordionNote(note)
 	local styles = useAccordionStyles({
 		open = open,
 		disabled = disabled,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local reduced = useReducedMotion()
+	local iconRef = useRef()
+	local icon = controlMetrics(theme.density).icon
+	useEffect(function()
+		local icon = iconRef.current
+		if not icon then
+			return nil
+		end
+		return playProperty(icon, {
+			Rotation = if open then 90 else 0,
+		}, theme.motion.default, reduced)
+	end, { open, reduced, theme })
 	local toggle = function()
 		if disabled == true then
 			return nil
@@ -62,46 +87,101 @@ local function Accordion(props)
 		setmetatable(_attributes_1, nil)
 		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	local _attributes_1 = table.clone(styles.list)
+	local _attributes_1 = table.clone(styles.stroke)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _attributes_2 = {
+	local _exp = React.createElement("uistroke", _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 = "Header",
 	}
-	for _k, _v in styles.header do
-		_attributes_2[_k] = _v
+	for _k, _v in cx(styles.header, hovering and disabled ~= true and styles.hover) do
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Event = {
+	_attributes_3.Event = {
 		Activated = toggle,
+		MouseEnter = function()
+			return setHovering(true)
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
 	}
-	local _attributes_3 = table.clone(styles.padding)
-	setmetatable(_attributes_3, nil)
-	local _exp_1 = React.createElement("uipadding", _attributes_3)
-	local _attributes_4 = {
-		key = "Title",
-	}
-	for _k, _v in styles.title do
-		_attributes_4[_k] = _v
+	local _attributes_4 = table.clone(styles.tail)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_4)
+	local _result
+	if summary == nil then
+		local _attributes_5 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_5[_k] = _v
+		end
+		_attributes_5.Text = title
+		_result = (React.createElement("textlabel", _attributes_5))
+	else
+		local _attributes_5 = {
+			key = "Copy",
+		}
+		for _k, _v in styles.copy do
+			_attributes_5[_k] = _v
+		end
+		local _exp_3 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		})
+		local _attributes_6 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Position = UDim2.new(0, 0, 0, 0)
+		_attributes_6.Size = UDim2.new(1, 0, 0, 0)
+		_attributes_6.Text = title
+		_attributes_6.LayoutOrder = 1
+		local _exp_4 = React.createElement("textlabel", _attributes_6)
+		local _attributes_7 = {
+			key = "Note",
+		}
+		for _k, _v in styles.note do
+			_attributes_7[_k] = _v
+		end
+		_attributes_7.Text = summary
+		_attributes_7.LayoutOrder = 2
+		_result = (React.createElement("frame", _attributes_5, _exp_3, _exp_4, React.createElement("textlabel", _attributes_7)))
 	end
-	_attributes_4.Text = title
-	local _exp_2 = React.createElement("textlabel", _attributes_4)
-	local _attributes_5 = {
+	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, _result, React.createElement(SxHost, {
+		tag = "frame",
 		key = "Icon",
+		hostRef = iconRef,
+		base = {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.new(0, icon, 0, icon),
+		},
+		className = styles.icon,
+	}, React.createElement(Icon, {
+		glyph = "chevronRight",
+		size = icon,
+		tint = if disabled == true then theme.palette.text.disabled else theme.palette.text.primary,
+	})))
+	local _attributes_5 = {
+		key = "Inset",
 	}
-	for _k, _v in styles.icon do
+	for _k, _v in styles.band do
 		_attributes_5[_k] = _v
 	end
-	_attributes_5.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
-	local _exp_3 = React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, React.createElement("imagelabel", _attributes_5))
-	local _attributes_6 = {
+	local _attributes_6 = table.clone(styles.tail)
+	setmetatable(_attributes_6, nil)
+	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_1, _exp_3, React.createElement(Collapse, {
 		key = "Body",
-	}
-	for _k, _v in styles.body do
-		_attributes_6[_k] = _v
-	end
-	local _attributes_7 = table.clone(styles.padding)
-	setmetatable(_attributes_7, nil)
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+		open = open,
+		className = styles.body,
+	}, React.createElement("frame", _attributes_5, React.createElement("uipadding", _attributes_6), children)))
 end
 local default = Accordion
 return {

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -2,14 +2,16 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
-	local open = _param.open
-	if open == nil then
-		open = false
-	end
 	local disabled = _param.disabled
-	return createStyles({
+	local heading = theme.typography.variants.h6
+	local padX = theme.padding.calc(1.5)
+	local padY = theme.padding.calc(1)
+	local icon = controlMetrics(theme.density).icon
+	local firstLine = padY + math.floor((heading.size * heading.leading) / 2)
+	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
@@ -31,45 +33,81 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			Active = disabled ~= true,
 			Selectable = disabled ~= true,
 		},
+		hover = {
+			BackgroundColor3 = theme.palette.action.hover,
+			BackgroundTransparency = 0,
+		},
+		tail = {
+			PaddingBottom = UDim.new(0, padY),
+		},
+		band = {
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		title = {
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2 + icon), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
+			TextWrapped = true,
 			TextColor3 = theme.palette.text.primary,
 			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
-		icon = {
-			Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
-			Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
-			AnchorPoint = Vector2.new(1, 0.5),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			ScaleType = Enum.ScaleType.Fit,
-			ImageColor3 = theme.palette.text.primary,
-			ImageTransparency = if disabled == true then 0.5 else 0,
-		},
-		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.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
-		},
-		body = {
-			LayoutOrder = 2,
+		copy = {
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, 0, 0, 0),
+			Position = UDim2.new(0, padX, 0, padY),
+			Size = UDim2.new(1, -(padX * 2 + icon), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			Visible = open,
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
-	})
+	}
+	local _left = "note"
+	local _object_1 = {
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	_object_1[_left_1] = _condition
+	_object_1.TextWrapped = true
+	_object_1.TextColor3 = theme.palette.text.secondary
+	_object_1.TextTransparency = if disabled == true then 0.5 else 0
+	_object_1.TextXAlignment = Enum.TextXAlignment.Left
+	_object[_left] = _object_1
+	_object.icon = {
+		Position = UDim2.new(1, -padX, 0, firstLine),
+		AnchorPoint = Vector2.new(1, 0.5),
+	}
+	_object.body = {
+		LayoutOrder = 2,
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		Thickness = 1,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	return createStyles(_object)
 end)
 local default = useAccordionStyles
 return {

package/out/ui/packages/accordion/components/accordionNote.d.ts

@@ -0,0 +1,2 @@
+/** An empty note stays off the header. The body still hides when the panel is shut. */
+export declare function accordionNote(note?: string): string | undefined;

package/out/ui/packages/accordion/components/accordionNote.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty note stays off the header. The body still hides when the panel is shut. 
+local function accordionNote(note)
+	if note == nil or note == "" then
+		return nil
+	end
+	return note
+end
+return {
+	accordionNote = accordionNote,
+}

package/out/ui/packages/alert/components/Alert.d.ts

@@ -5,6 +5,8 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    action?: string;
+    onAction?: () => void;
     filled?: boolean;
     square?: boolean;
 }

package/out/ui/packages/alert/components/Alert.luau

@@ -1,8 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
+local alertAction = TS.import(script, script.Parent, "alertAction").alertAction
 local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
 	local _binding = props
@@ -10,6 +11,8 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local filled = _binding.filled
 	local square = _binding.square
 	local className = _binding.className
@@ -17,6 +20,7 @@ local function Alert(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local dismissible = onClose ~= nil
+	local label = alertAction(action)
 	local styles = useAlertStyles({
 		severity = severity,
 		dismissible = dismissible,
@@ -49,18 +53,22 @@ local function Alert(props)
 	local _condition_2 = dismissible
 	if _condition_2 then
 		local _attributes_3 = {
-			key = "Close",
+			id = "Close",
+			glyph = "close",
 		}
-		for _k, _v in styles.close do
-			_attributes_3[_k] = _v
+		local _result = (styles.closeGlyph).Size
+		if _result ~= nil then
+			_result = _result.X.Offset
 		end
-		_attributes_3.Image = tostring(Icons.Close)
-		_attributes_3.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_3))
+		local _condition_3 = _result
+		if _condition_3 == nil then
+			_condition_3 = 16
+		end
+		_attributes_3.iconSize = _condition_3
+		_attributes_3.tint = (styles.closeGlyph).ImageColor3
+		_attributes_3.className = styles.close
+		_attributes_3.onClick = onClose
+		_condition_2 = (React.createElement(IconButton, _attributes_3))
 	end
 	local _attributes_3 = {
 		key = "Body",
@@ -89,7 +97,26 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
+	local _exp_3 = React.createElement("textlabel", _attributes_5)
+	local _condition_4 = label ~= nil
+	if _condition_4 then
+		local _attributes_6 = {
+			key = "Action",
+		}
+		for _k, _v in styles.action do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Text = label
+		_attributes_6.Event = {
+			Activated = function()
+				if onAction then
+					onAction()
+				end
+			end,
+		}
+		_condition_4 = (React.createElement("textbutton", _attributes_6))
+	end
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, _exp_3, _condition_4))
 end
 local default = Alert
 return {

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
@@ -9,7 +10,17 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local dismissible = _param.dismissible
 	local filled = _param.filled
 	local tone = theme.palette.status[alertSeverity(severity)]
-	local closeSize = theme.spacing.calc(2)
+	local padX = theme.padding.calc(2)
+	local padY = theme.padding.calc(1.5)
+	local _condition = theme.typography.fontSizes.body
+	if _condition == nil then
+		_condition = theme.typography.variants.body.size
+	end
+	local glyph = _condition
+	local icon = controlMetrics(theme.density).icon
+	local hit = math.max(theme.spacing.calc(3), icon + theme.padding.calc(2))
+	local closeGap = if dismissible == true then hit + theme.padding.calc(1) else 0
+	local ink = if filled == true then tone.on else theme.palette.text.primary
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -18,10 +29,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+			PaddingBottom = UDim.new(0, padY),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
@@ -33,8 +41,9 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 		body = {
+			Position = UDim2.new(0, padX, 0, padY),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			Size = UDim2.new(1, -(padX * 2 + closeGap), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -46,46 +55,59 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			Padding = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = if filled == true then tone.on else tone.main,
+			TextColor3 = ink,
 			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
 			LayoutOrder = 1,
 		},
 	}
 	local _left = "message"
 	local _object_1 = {
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Size = UDim2.fromScale(0, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Font = theme.typography.fontFamilies.default,
 	}
 	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.caption
-	if _condition == nil then
-		_condition = theme.typography.fontSizes.body
+	local _condition_1 = theme.typography.fontSizes.caption
+	if _condition_1 == nil then
+		_condition_1 = theme.typography.fontSizes.body
 	end
-	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
+	_object_1[_left_1] = _condition_1
+	_object_1.TextColor3 = ink
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
-	_object.close = {
-		Size = UDim2.fromOffset(closeSize, closeSize),
-		Position = UDim2.new(1, 0, 0, 0),
-		AnchorPoint = Vector2.new(1, 0),
+	_object.action = {
+		AutomaticSize = Enum.AutomaticSize.Y,
+		Size = UDim2.new(1, 0, 0, 0),
+		TextWrapped = true,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
-		ScaleType = Enum.ScaleType.Fit,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.body,
+		TextColor3 = ink,
+		AutoButtonColor = false,
+		LayoutOrder = 3,
+	}
+	_object.close = {
+		Size = UDim2.fromOffset(hit, hit),
+		Position = UDim2.new(1, -padX, 0, padY + glyph / 2),
+		AnchorPoint = Vector2.new(1, 0.5),
 		ZIndex = 2,
 	}
+	_object.closeGlyph = {
+		Size = UDim2.fromOffset(icon, icon),
+		ImageColor3 = ink,
+	}
 	return createStyles(_object)
 end)
 local default = useAlertStyles

package/out/ui/packages/alert/components/alertAction.d.ts

@@ -0,0 +1,2 @@
+/** An empty label stays off the banner. */
+export declare function alertAction(label?: string): string | undefined;

package/out/ui/packages/alert/components/alertAction.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* An empty label stays off the banner. 
+local function alertAction(label)
+	if label == nil or label == "" then
+		return nil
+	end
+	return label
+end
+return {
+	alertAction = alertAction,
+}

package/out/ui/packages/appBar/components/AppBar.d.ts

@@ -3,6 +3,7 @@ import { CustomizedProps } from "../../../../theme/index";
 import { AppBarColor, AppBarElevation } from "./AppBar.styles";
 export interface AppBarProps {
     title?: string;
+    subtitle?: string;
     elevation?: AppBarElevation;
     color?: AppBarColor;
     children?: React.ReactNode;