@rbxts/uiblox 0.2.0-alpha.24 → 0.2.0-alpha.26

package/out/ui/packages/formText/components/FormLabel.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useFormTextStyles = TS.import(script, script.Parent, "FormText.styles").default
 local function FormLabel(props)
 	local _binding = props
@@ -17,28 +18,23 @@ local function FormLabel(props)
 		disabled = disabled,
 	})
 	local caption = if required == true then `{text} *` else text
-	local _attributes = {}
+	local _attributes = {
+		tag = "textlabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "FormLabel"
 	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.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	_attributes.Text = caption
-	return React.createElement("textlabel", _attributes)
+	return React.createElement(SxHost, _attributes)
 end
 local default = FormLabel
 return {

package/out/ui/packages/gradientEditor/components/GradientEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _colorPicker = TS.import(script, script.Parent.Parent.Parent, "colorPicker")
 local ColorSequenceEditor = _colorPicker.ColorSequenceEditor
 local NumberSequenceEditor = _colorPicker.NumberSequenceEditor
@@ -21,26 +22,21 @@ local function GradientEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useGradientEditorStyles()
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "GradientEditor"
 	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.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -159,7 +155,7 @@ local function GradientEditor(props)
 		_attributes_17[_k] = _v
 	end
 	_attributes_17.LayoutOrder = 4
-	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
+	return React.createElement(SxHost, _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
 		value = value.enabled,
 		disabled = disabled,
 		label = "Enabled",

package/out/ui/packages/host/components/SxHost.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+import { StyleState } from "../../../../theme/styles/utilities/resolveStyle";
+import { SxInput } from "../../../../theme/styles/utilities/resolveSx";
+export interface SxHostProps {
+    tag?: string;
+    base?: object;
+    className?: object;
+    sx?: SxInput | object;
+    state?: StyleState;
+    hostRef?: React.Ref<any>;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}
+declare function SxHost(props: SxHostProps): React.ReactElement<{
+    ref: (instance: GuiObject) => void;
+    children: React.Element<any, string | React.JSXElementConstructor<any>>[];
+}, string | React.JSXElementConstructor<any>>;
+export default SxHost;

package/out/ui/packages/host/components/SxHost.luau

@@ -0,0 +1,197 @@
+-- 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 useRef = _react.useRef
+local useState = _react.useState
+local observeViewport = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks", "viewportObserver").observeViewport
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _hostRules = TS.import(script, script.Parent.Parent, "hostRules")
+local elementProps = _hostRules.elementProps
+local elementType = _hostRules.elementType
+local hostKind = _hostRules.hostKind
+local hostRest = _hostRules.hostRest
+local layoutGapPatch = _hostRules.layoutGapPatch
+local sxUsesBreakpoints = _hostRules.sxUsesBreakpoints
+local paintHostStyle = TS.import(script, script.Parent.Parent, "hostPaint").paintHostStyle
+local function setRef(hostRef, instance)
+	if hostRef == nil then
+		return nil
+	end
+	local _hostRef = hostRef
+	if type(_hostRef) == "function" then
+		hostRef(instance)
+		return nil
+	end
+	hostRef.current = instance
+end
+local function SxHost(props)
+	local _condition = props.tag
+	if _condition == nil then
+		_condition = "frame"
+	end
+	local tag = _condition
+	local sx = props.sx
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local bound = useRef()
+	local width, setWidth = useState(nil)
+	local hover, setHover = useState(false)
+	local pressed, setPressed = useState(false)
+	local focused, setFocused = useState(false)
+	useEffect(function()
+		local host = bound.current
+		if host == nil or not sxUsesBreakpoints(sx) then
+			return nil
+		end
+		return observeViewport(host, function(size)
+			setWidth(function(prev)
+				return if prev == size.width then prev else size.width
+			end)
+		end)
+	end, { sx })
+	local passed = props.state
+	local _result = passed
+	if _result ~= nil then
+		_result = _result.disabled
+	end
+	local locked = _result == true
+	local _exp = props.base
+	local _exp_1 = props.className
+	local _object = {
+		hover = hover,
+		pressed = pressed,
+		focused = focused,
+	}
+	if passed then
+		for _k, _v in passed do
+			_object[_k] = _v
+		end
+	end
+	local paint = paintHostStyle(theme, _exp, _exp_1, sx, width, _object)
+	local rest = hostRest(props)
+	local caller = rest.Event
+	local _object_1 = {}
+	if caller then
+		for _k, _v in caller do
+			_object_1[_k] = _v
+		end
+	end
+	_object_1.MouseEnter = function(...)
+		local args = { ... }
+		if not locked then
+			setHover(true)
+		end
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseEnter
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.MouseLeave = function(...)
+		local args = { ... }
+		setHover(false)
+		setPressed(false)
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseLeave
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.MouseButton1Down = function(...)
+		local args = { ... }
+		if not locked then
+			setPressed(true)
+		end
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseButton1Down
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.MouseButton1Up = function(...)
+		local args = { ... }
+		setPressed(false)
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseButton1Up
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.SelectionGained = function(...)
+		local args = { ... }
+		if not locked then
+			setFocused(true)
+		end
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.SelectionGained
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	_object_1.SelectionLost = function(...)
+		local args = { ... }
+		setFocused(false)
+		local _result_1 = caller
+		if _result_1 ~= nil then
+			_result_1 = _result_1.SelectionLost
+			if _result_1 ~= nil then
+				_result_1(unpack(args))
+			end
+		end
+	end
+	rest.Event = _object_1
+	local nodes = React.Children.toArray(props.children)
+	local painted = {}
+	local hasPad = false
+	local hasCorner = false
+	for _, node in nodes do
+		if not React.isValidElement(node) then
+			continue
+		end
+		local kind = hostKind(elementType(node))
+		if kind == "uipadding" then
+			hasPad = true
+		end
+		if kind == "uicorner" then
+			hasCorner = true
+		end
+		local patch = if kind ~= nil then layoutGapPatch(kind, elementProps(node), paint.gap) else nil
+		local _arg0 = if patch ~= nil then React.cloneElement(node, patch) else node
+		table.insert(painted, _arg0)
+	end
+	if not hasPad and paint.padding ~= nil then
+		local _arg0 = React.createElement("uipadding", paint.padding)
+		table.insert(painted, _arg0)
+	end
+	if not hasCorner and paint.corner ~= nil then
+		local _arg0 = React.createElement("uicorner", paint.corner)
+		table.insert(painted, _arg0)
+	end
+	local _object_2 = table.clone(paint.props)
+	setmetatable(_object_2, nil)
+	for _k, _v in rest do
+		_object_2[_k] = _v
+	end
+	_object_2.ref = function(instance)
+		bound.current = instance
+		setRef(props.hostRef, instance)
+	end
+	_object_2.children = painted
+	return React.createElement(tag, _object_2)
+end
+local default = SxHost
+return {
+	default = default,
+}

package/out/ui/packages/host/hostPaint.d.ts

@@ -0,0 +1,11 @@
+import { resolveSx, ResolvedSx, SxInput } from "../../../theme/styles/utilities/resolveSx";
+import { StyleState } from "../../../theme/styles/utilities/resolveStyle";
+export interface HostPaint {
+    props: {
+        [key: string]: unknown;
+    };
+    padding?: ResolvedSx["padding"];
+    corner?: ResolvedSx["corner"];
+    gap?: number;
+}
+export declare function paintHostStyle(theme: Parameters<typeof resolveSx>[0], base: object | undefined, className: object | undefined, sx: SxInput | undefined, width: number | undefined, state: StyleState | undefined): HostPaint;

package/out/ui/packages/host/hostPaint.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local resolveSx = TS.import(script, script.Parent.Parent.Parent.Parent, "theme", "styles", "utilities", "resolveSx").resolveSx
+local resolveStyle = TS.import(script, script.Parent.Parent.Parent.Parent, "theme", "styles", "utilities", "resolveStyle").resolveStyle
+local function paintHostStyle(theme, base, className, sx, width, state)
+	local resolved = resolveSx(theme, sx, width)
+	local _object = {}
+	local _spread = (base or {})
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	local _spread_1 = (className or {})
+	if _spread_1 then
+		for _k, _v in _spread_1 do
+			_object[_k] = _v
+		end
+	end
+	for _k, _v in resolved.root do
+		_object[_k] = _v
+	end
+	local merged = _object
+	return {
+		props = resolveStyle(merged, state or {}),
+		padding = resolved.padding,
+		corner = resolved.corner,
+		gap = resolved.gap,
+	}
+end
+return {
+	paintHostStyle = paintHostStyle,
+}

package/out/ui/packages/host/hostRules.d.ts

@@ -0,0 +1,15 @@
+export declare function sxUsesBreakpoints(sx: object | undefined): boolean;
+export declare function elementProps(element: unknown): {
+    [key: string]: unknown;
+};
+export declare function elementType(element: unknown): unknown;
+export declare function hostKind(typeName: unknown): string | undefined;
+/** Explicit layout padding wins. Otherwise sx `gap` fills the empty field. */
+export declare function layoutGapPatch(kind: string, props: {
+    [key: string]: unknown;
+}, gap: number | undefined): {
+    [key: string]: unknown;
+} | undefined;
+export declare function hostRest(props: object): {
+    [key: string]: unknown;
+};

package/out/ui/packages/host/hostRules.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local SKIP = {
+	tag = true,
+	base = true,
+	className = true,
+	sx = true,
+	state = true,
+	hostRef = true,
+	children = true,
+}
+local function sxUsesBreakpoints(sx)
+	if sx == nil then
+		return false
+	end
+	for _, value in pairs(sx) do
+		if typeof(value) ~= "table" then
+			continue
+		end
+		local record = value
+		if record.phone ~= nil or record.tablet ~= nil or record.desktop ~= nil then
+			return true
+		end
+	end
+	return false
+end
+local function elementProps(element)
+	local _element = element
+	if typeof(_element) ~= "table" then
+		return {}
+	end
+	local props = element.props
+	if typeof(props) ~= "table" then
+		return {}
+	end
+	return props
+end
+local function elementType(element)
+	local _element = element
+	if typeof(_element) ~= "table" then
+		return nil
+	end
+	return element.type
+end
+local function hostKind(typeName)
+	local _typeName = typeName
+	if not (type(_typeName) == "string") then
+		return nil
+	end
+	return string.lower(typeName)
+end
+--* Explicit layout padding wins. Otherwise sx `gap` fills the empty field. 
+local function layoutGapPatch(kind, props, gap)
+	if gap == nil then
+		return nil
+	end
+	if kind == "uilistlayout" then
+		if props.Padding ~= nil then
+			return nil
+		end
+		return {
+			Padding = UDim.new(0, gap),
+		}
+	end
+	if kind == "uigridlayout" then
+		if props.CellPadding ~= nil then
+			return nil
+		end
+		return {
+			CellPadding = UDim2.new(0, gap, 0, gap),
+		}
+	end
+	return nil
+end
+local function hostRest(props)
+	local rest = {}
+	for key, value in pairs(props) do
+		local name = key
+		if SKIP[name] == true then
+			continue
+		end
+		rest[name] = value
+	end
+	return rest
+end
+return {
+	sxUsesBreakpoints = sxUsesBreakpoints,
+	elementProps = elementProps,
+	elementType = elementType,
+	hostKind = hostKind,
+	layoutGapPatch = layoutGapPatch,
+	hostRest = hostRest,
+}

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

@@ -0,0 +1,3 @@
+export { default as SxHost, SxHostProps } from "./components/SxHost";
+export { paintHostStyle } from "./hostPaint";
+export { elementProps, elementType, hostKind, hostRest, layoutGapPatch, sxUsesBreakpoints } from "./hostRules";

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

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.SxHost = TS.import(script, script, "components", "SxHost").default
+exports.paintHostStyle = TS.import(script, script, "hostPaint").paintHostStyle
+local _hostRules = TS.import(script, script, "hostRules")
+exports.elementProps = _hostRules.elementProps
+exports.elementType = _hostRules.elementType
+exports.hostKind = _hostRules.hostKind
+exports.hostRest = _hostRules.hostRest
+exports.layoutGapPatch = _hostRules.layoutGapPatch
+exports.sxUsesBreakpoints = _hostRules.sxUsesBreakpoints
+return exports

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

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
@@ -12,29 +13,21 @@ local function Icon(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = {}
+	local _attributes = {
+		tag = "imagelabel",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Icon"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in container 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.hostRef = ref
+	_attributes.base = container
+	_attributes.className = className
+	_attributes.sx = sx
 	_attributes.Image = tostring(icon)
 	_attributes.ImageColor3 = tint or container.ImageColor3
-	return React.createElement("imagelabel", _attributes)
+	return React.createElement(SxHost, _attributes)
 end
 local default = Icon
 return {

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

@@ -5,6 +5,7 @@ local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local iconSpinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").iconSpinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
@@ -39,26 +40,25 @@ local function IconButton(props)
 		setHovering(false)
 		setFocused(false)
 	end, { active })
-	local _attributes = {}
+	local _attributes = {
+		tag = "imagebutton",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "IconButton"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in container 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.hostRef = ref
+	_attributes.base = container
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		loading = loading,
+		selected = selected,
+		hover = hovering,
+		focused = focused,
+	}
 	_attributes.Active = active
 	_attributes.AutoButtonColor = active
 	_attributes.Selectable = active
@@ -91,7 +91,7 @@ local function IconButton(props)
 	}
 	local _attributes_1 = table.clone(corner)
 	setmetatable(_attributes_1, nil)
-	return React.createElement("imagebutton", _attributes, React.createElement("uicorner", _attributes_1), loading and (React.createElement(CircularProgress, {
+	return React.createElement(SxHost, _attributes, React.createElement("uicorner", _attributes_1), loading and (React.createElement(CircularProgress, {
 		size = iconSpinnerPixels(props.size),
 		thickness = 2,
 		color = tint,

package/out/ui/packages/imageList/components/ImageList.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local imageListTitle = TS.import(script, script.Parent, "imageListLayout").imageListTitle
 local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
 local function ImageList(props)
@@ -19,26 +20,18 @@ local function ImageList(props)
 		gap = gap,
 		itemSize = itemSize,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "ImageList"
 	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.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.grid)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uigridlayout", _attributes_1)
@@ -92,7 +85,7 @@ local function ImageList(props)
 		_newValue[_k] = _callback(_v, _k - 1, items)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
 end
 local default = ImageList
 return {

package/out/ui/packages/imageList/components/ImageList.styles.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local Common = _theme.Common
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
@@ -50,12 +51,12 @@ local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 		title = {
 			Size = UDim2.new(1, 0, 0, bar),
 			Position = UDim2.new(0, 0, 1, -bar),
-			BackgroundColor3 = theme.palette.surface.overlay,
-			BackgroundTransparency = 0.25,
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = 0.35,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.inverse,
+			TextColor3 = Common.White,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTruncate = Enum.TextTruncate.AtEnd,
 			ZIndex = 2,