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

package/out/theme/styles/utilities/resolveSx.luau

@@ -0,0 +1,479 @@
+-- Compiled with roblox-ts v3.0.0
+--* Dot-path into `theme.palette` (typed for common roles). 
+local function resolvePaletteToken(palette, token)
+	local _token = token
+	if not (type(_token) == "string") then
+		return token
+	end
+	local parts = string.split(token, ".")
+	local cursor = palette
+	for _, part in parts do
+		local _condition = cursor == nil
+		if not _condition then
+			local _cursor = cursor
+			_condition = typeof(_cursor) ~= "table"
+		end
+		if _condition then
+			return Color3.new(0, 0, 0)
+		end
+		cursor = cursor[part]
+	end
+	local _cursor = cursor
+	if typeof(_cursor) == "Color3" then
+		return cursor
+	end
+	return Color3.new(0, 0, 0)
+end
+--* Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. 
+local function resolveResponsive(value, width)
+	local _condition = value == nil
+	if not _condition then
+		local _value = value
+		_condition = typeof(_value) ~= "table"
+	end
+	if _condition then
+		return value
+	end
+	local record = value
+	local size = if width == width and width < math.huge and width > 0 then width else 0
+	local name = if size < 600 then "phone" elseif size < 960 then "tablet" else "desktop"
+	if name == "desktop" then
+		local _condition_1 = record.desktop
+		if _condition_1 == nil then
+			_condition_1 = record.tablet
+			if _condition_1 == nil then
+				_condition_1 = record.phone
+			end
+		end
+		return _condition_1
+	end
+	if name == "tablet" then
+		local _condition_1 = record.tablet
+		if _condition_1 == nil then
+			_condition_1 = record.phone
+		end
+		return _condition_1
+	end
+	return record.phone
+end
+local SELECTORS = {
+	_hover = true,
+	_pressed = true,
+	_focus = true,
+	_focusVisible = true,
+	_disabled = true,
+	_selected = true,
+	_checked = true,
+	_loading = true,
+	_first = true,
+	_last = true,
+	_odd = true,
+	_even = true,
+}
+local SHORTHAND = {
+	width = true,
+	height = true,
+	w = true,
+	h = true,
+	size = true,
+	x = true,
+	y = true,
+	position = true,
+	pos = true,
+	anchor = true,
+	p = true,
+	px = true,
+	py = true,
+	pt = true,
+	pr = true,
+	pb = true,
+	pl = true,
+	padding = true,
+	gap = true,
+	bgcolor = true,
+	bg = true,
+	backgroundColor = true,
+	color = true,
+	borderColor = true,
+	opacity = true,
+	transparency = true,
+	border = true,
+	borderWidth = true,
+	radius = true,
+	typography = true,
+	fontSize = true,
+	font = true,
+	visible = true,
+	zIndex = true,
+	z = true,
+}
+--* CSS-like shorthands + pass-through Instance props. No CSS string parser. 
+local function pick(value, width)
+	if value == nil then
+		return nil
+	end
+	if width ~= nil then
+		return resolveResponsive(value, width)
+	end
+	local _value = value
+	if typeof(_value) ~= "table" then
+		return value
+	end
+	local record = value
+	if record.phone ~= nil or record.tablet ~= nil or record.desktop ~= nil then
+		local _condition = record.desktop
+		if _condition == nil then
+			_condition = record.tablet
+			if _condition == nil then
+				_condition = record.phone
+			end
+		end
+		return _condition
+	end
+	return value
+end
+local function asUDim(value)
+	local _value = value
+	return if type(_value) == "number" then UDim.new(0, value) else value
+end
+local function sizeAxis(value, axis)
+	if value == nil then
+		return nil
+	end
+	local _value = value
+	if type(_value) == "number" then
+		return UDim.new(0, value)
+	end
+	local _value_1 = value
+	if typeof(_value_1) == "UDim" then
+		return value
+	end
+	return if axis == "X" then value.X else value.Y
+end
+local function padSides(padding)
+	if padding == nil then
+		return {
+			top = 0,
+			right = 0,
+			bottom = 0,
+			left = 0,
+		}
+	end
+	local _padding = padding
+	if type(_padding) == "number" then
+		return {
+			top = padding,
+			right = padding,
+			bottom = padding,
+			left = padding,
+		}
+	end
+	local _condition = padding.x
+	if _condition == nil then
+		_condition = 0
+	end
+	local x = _condition
+	local _condition_1 = padding.y
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local y = _condition_1
+	local _object = {}
+	local _left = "top"
+	local _condition_2 = padding.top
+	if _condition_2 == nil then
+		_condition_2 = y
+	end
+	_object[_left] = _condition_2
+	local _left_1 = "right"
+	local _condition_3 = padding.right
+	if _condition_3 == nil then
+		_condition_3 = x
+	end
+	_object[_left_1] = _condition_3
+	local _left_2 = "bottom"
+	local _condition_4 = padding.bottom
+	if _condition_4 == nil then
+		_condition_4 = y
+	end
+	_object[_left_2] = _condition_4
+	local _left_3 = "left"
+	local _condition_5 = padding.left
+	if _condition_5 == nil then
+		_condition_5 = x
+	end
+	_object[_left_3] = _condition_5
+	return _object
+end
+local function colorOf(theme, value)
+	if value == nil then
+		return nil
+	end
+	return resolvePaletteToken(theme.palette, value)
+end
+--[[
+	*
+	 * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
+	 * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
+	 
+]]
+local function resolveSx(theme, sx, width)
+	if sx == nil then
+		return {
+			root = {},
+		}
+	end
+	local root = {}
+	local pad
+	local radius
+	local gap
+	local _condition = sx.width
+	if _condition == nil then
+		_condition = sx.w
+	end
+	local widthVal = pick(_condition, width)
+	local _condition_1 = sx.height
+	if _condition_1 == nil then
+		_condition_1 = sx.h
+	end
+	local heightVal = pick(_condition_1, width)
+	local sizeVal = pick(sx.size, width)
+	local sizeX = sizeAxis(widthVal, "X")
+	local sizeY = sizeAxis(heightVal, "Y")
+	if sizeVal ~= nil then
+		if typeof(sizeVal) == "UDim2" then
+			sizeX = sizeX or sizeVal.X
+			sizeY = sizeY or sizeVal.Y
+		else
+			local record = sizeVal
+			sizeX = sizeX or sizeAxis(record.width, "X")
+			sizeY = sizeY or sizeAxis(record.height, "Y")
+		end
+	end
+	if sizeX ~= nil or sizeY ~= nil then
+		local _result = sizeX
+		if _result ~= nil then
+			_result = _result.Scale
+		end
+		local _condition_2 = _result
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local _result_1 = sizeX
+		if _result_1 ~= nil then
+			_result_1 = _result_1.Offset
+		end
+		local _condition_3 = _result_1
+		if _condition_3 == nil then
+			_condition_3 = 0
+		end
+		local _result_2 = sizeY
+		if _result_2 ~= nil then
+			_result_2 = _result_2.Scale
+		end
+		local _condition_4 = _result_2
+		if _condition_4 == nil then
+			_condition_4 = 0
+		end
+		local _result_3 = sizeY
+		if _result_3 ~= nil then
+			_result_3 = _result_3.Offset
+		end
+		local _condition_5 = _result_3
+		if _condition_5 == nil then
+			_condition_5 = 0
+		end
+		root.Size = UDim2.new(_condition_2, _condition_3, _condition_4, _condition_5)
+	end
+	local position = pick(sx.position or sx.pos, width)
+	local x = pick(sx.x, width)
+	local y = pick(sx.y, width)
+	if position ~= nil then
+		root.Position = position
+	elseif x ~= nil or y ~= nil then
+		local xU = if x ~= nil then asUDim(x) else UDim.new(0, 0)
+		local yU = if y ~= nil then asUDim(y) else UDim.new(0, 0)
+		root.Position = UDim2.new(xU.Scale, xU.Offset, yU.Scale, yU.Offset)
+	end
+	local anchor = pick(sx.anchor, width)
+	if anchor ~= nil then
+		if type(anchor) == "number" then
+			root.AnchorPoint = Vector2.new(anchor, anchor)
+		elseif typeof(anchor) == "Vector2" then
+			root.AnchorPoint = anchor
+		else
+			local pair = anchor
+			root.AnchorPoint = Vector2.new(pair[1], pair[2])
+		end
+	end
+	local padding = pick(sx.padding, width)
+	if padding ~= nil then
+		pad = padSides(padding)
+	end
+	local p = pick(sx.p, width)
+	local px = pick(sx.px, width)
+	local py = pick(sx.py, width)
+	local pt = pick(sx.pt, width)
+	local pr = pick(sx.pr, width)
+	local pb = pick(sx.pb, width)
+	local pl = pick(sx.pl, width)
+	if p ~= nil or px ~= nil or py ~= nil or pt ~= nil or pr ~= nil or pb ~= nil or pl ~= nil then
+		local base = pad or {
+			top = 0,
+			right = 0,
+			bottom = 0,
+			left = 0,
+		}
+		local _condition_2 = p
+		if _condition_2 == nil then
+			_condition_2 = 0
+		end
+		local uniform = _condition_2
+		local _object = {}
+		local _left = "top"
+		local _condition_3 = pt
+		if _condition_3 == nil then
+			_condition_3 = py
+			if _condition_3 == nil then
+				_condition_3 = (if p ~= nil then uniform else base.top)
+			end
+		end
+		_object[_left] = _condition_3
+		local _left_1 = "right"
+		local _condition_4 = pr
+		if _condition_4 == nil then
+			_condition_4 = px
+			if _condition_4 == nil then
+				_condition_4 = (if p ~= nil then uniform else base.right)
+			end
+		end
+		_object[_left_1] = _condition_4
+		local _left_2 = "bottom"
+		local _condition_5 = pb
+		if _condition_5 == nil then
+			_condition_5 = py
+			if _condition_5 == nil then
+				_condition_5 = (if p ~= nil then uniform else base.bottom)
+			end
+		end
+		_object[_left_2] = _condition_5
+		local _left_3 = "left"
+		local _condition_6 = pl
+		if _condition_6 == nil then
+			_condition_6 = px
+			if _condition_6 == nil then
+				_condition_6 = (if p ~= nil then uniform else base.left)
+			end
+		end
+		_object[_left_3] = _condition_6
+		pad = _object
+	end
+	local gapVal = pick(sx.gap, width)
+	if gapVal ~= nil then
+		gap = theme.spacing.calc(gapVal)
+	end
+	local bg = pick(sx.bgcolor or sx.bg or sx.backgroundColor, width)
+	local bgColor = colorOf(theme, bg)
+	if bgColor ~= nil then
+		root.BackgroundColor3 = bgColor
+		if root.BackgroundTransparency == nil then
+			root.BackgroundTransparency = 0
+		end
+	end
+	local textColor = colorOf(theme, pick(sx.color, width))
+	if textColor ~= nil then
+		root.TextColor3 = textColor
+	end
+	local borderColor = colorOf(theme, pick(sx.borderColor, width))
+	if borderColor ~= nil then
+		root.BorderColor3 = borderColor
+	end
+	local opacity = pick(sx.opacity, width)
+	if opacity ~= nil then
+		root.BackgroundTransparency = 1 - opacity
+	end
+	local transparency = pick(sx.transparency, width)
+	if transparency ~= nil then
+		root.BackgroundTransparency = transparency
+	end
+	local _condition_2 = sx.border
+	if _condition_2 == nil then
+		_condition_2 = sx.borderWidth
+	end
+	local border = pick(_condition_2, width)
+	if border ~= nil then
+		root.BorderSizePixel = border
+	end
+	local radiusVal = pick(sx.radius, width)
+	if radiusVal ~= nil then
+		radius = radiusVal
+	end
+	local typography = pick(sx.typography, width)
+	if typography ~= nil then
+		local variant = theme.typography.variants[typography]
+		if variant ~= nil then
+			root.TextSize = variant.size
+			root.Font = theme.typography.fontFamilies[variant.family]
+		end
+	end
+	local fontSize = pick(sx.fontSize, width)
+	if fontSize ~= nil then
+		root.TextSize = fontSize
+	end
+	local font = pick(sx.font, width)
+	if font ~= nil then
+		if typeof(font) == "EnumItem" then
+			root.Font = font
+		else
+			root.Font = theme.typography.fontFamilies[font]
+		end
+	end
+	local visible = pick(sx.visible, width)
+	if visible ~= nil then
+		root.Visible = visible
+	end
+	local _condition_3 = sx.zIndex
+	if _condition_3 == nil then
+		_condition_3 = sx.z
+	end
+	local zIndex = pick(_condition_3, width)
+	if zIndex ~= nil then
+		root.ZIndex = zIndex
+	end
+	for key, raw in pairs(sx) do
+		local name = key
+		if SHORTHAND[name] == true then
+			continue
+		end
+		if SELECTORS[name] == true then
+			local nested = resolveSx(theme, raw, width)
+			root[name] = nested.root
+			continue
+		end
+		root[name] = pick(raw, width)
+	end
+	local resolved = {
+		root = root,
+	}
+	if pad ~= nil then
+		resolved.padding = {
+			PaddingTop = UDim.new(0, theme.spacing.calc(pad.top)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(pad.right)),
+			PaddingBottom = UDim.new(0, theme.spacing.calc(pad.bottom)),
+			PaddingLeft = UDim.new(0, theme.spacing.calc(pad.left)),
+		}
+	end
+	if radius ~= nil then
+		resolved.corner = {
+			CornerRadius = UDim.new(0, radius),
+		}
+	end
+	if gap ~= nil then
+		resolved.gap = gap
+	end
+	return resolved
+end
+return {
+	resolvePaletteToken = resolvePaletteToken,
+	resolveSx = resolveSx,
+}

package/out/theme/styles/utilities/styleCache.d.ts

@@ -1,2 +1,4 @@
 export declare function styleDepsKey(props: object | undefined): string;
 export declare function createStyleCache<T extends defined>(): (theme: object, key: string, create: () => T) => T;
+/** Drop all makeStyles memo buckets (theme hot-reload / tests). */
+export declare function clearStyleCaches(): void;

package/out/theme/styles/utilities/styleCache.luau

@@ -9,6 +9,7 @@ local KEYED = {
 	CFrame = true,
 	BrickColor = true,
 }
+local caches = {}
 local function styleDepsKey(props)
 	if props == nil then
 		return ""
@@ -40,6 +41,7 @@ local function styleDepsKey(props)
 end
 local function createStyleCache()
 	local byTheme = {}
+	table.insert(caches, byTheme)
 	return function(theme, key, create)
 		local _theme = theme
 		local bucket = byTheme[_theme]
@@ -62,7 +64,14 @@ local function createStyleCache()
 		return value
 	end
 end
+--* Drop all makeStyles memo buckets (theme hot-reload / tests). 
+local function clearStyleCaches()
+	for _, cache in caches do
+		table.clear(cache)
+	end
+end
 return {
 	styleDepsKey = styleDepsKey,
 	createStyleCache = createStyleCache,
+	clearStyleCaches = clearStyleCaches,
 }

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

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+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
@@ -40,26 +41,21 @@ local function Accordion(props)
 			_result(nextOpen)
 		end
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Accordion"
 	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 _condition_1 = square ~= true
 	if _condition_1 then
 		local _attributes_1 = table.clone(styles.corner)
@@ -105,7 +101,7 @@ local function Accordion(props)
 	end
 	local _attributes_7 = table.clone(styles.padding)
 	setmetatable(_attributes_7, nil)
-	return React.createElement("frame", _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
 end
 local default = Accordion
 return {

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

@@ -2,6 +2,7 @@
 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 useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
 	local _binding = props
@@ -21,26 +22,18 @@ local function Alert(props)
 		dismissible = dismissible,
 		filled = filled,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Alert"
 	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.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
@@ -96,7 +89,7 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	return React.createElement("frame", _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
+	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)))
 end
 local default = Alert
 return {

package/out/ui/packages/appBar/components/AppBar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAppBarStyles = TS.import(script, script.Parent, "AppBar.styles").default
 local function AppBar(props)
 	local _binding = props
@@ -27,26 +28,18 @@ local function AppBar(props)
 		color = color,
 		hasActions = children ~= nil,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AppBar"
 	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.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
@@ -74,7 +67,7 @@ local function AppBar(props)
 		setmetatable(_attributes_3, nil)
 		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uilistlayout", _attributes_3), children))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1, _condition_2)
 end
 local default = AppBar
 return {