@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.30

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.d.ts

@@ -4,6 +4,8 @@ export interface AccordionProps {
     title: string;
     open?: boolean;
     defaultOpen?: boolean;
+    disabled?: boolean;
+    square?: boolean;
     onChange?: (open: boolean) => void;
     children?: React.ReactNode;
 }

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

@@ -3,13 +3,19 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
+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
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
 	local title = _binding.title
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
+	local disabled = _binding.disabled
+	local square = _binding.square
 	local onChange = _binding.onChange
 	local children = _binding.children
 	local className = _binding.className
@@ -20,8 +26,12 @@ local function Accordion(props)
 	local open = accordionOpen(localOpen, controlled)
 	local styles = useAccordionStyles({
 		open = open,
+		disabled = disabled,
 	})
 	local toggle = function()
+		if disabled == true then
+			return nil
+		end
 		local nextOpen = not open
 		if controlled == nil then
 			setLocalOpen(nextOpen)
@@ -31,52 +41,58 @@ 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
+	_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)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	local _attributes_1 = table.clone(styles.corner)
+	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.list)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	local _attributes_3 = {
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
 		key = "Header",
 	}
 	for _k, _v in styles.header do
-		_attributes_3[_k] = _v
+		_attributes_2[_k] = _v
 	end
-	_attributes_3.Event = {
+	_attributes_2.Event = {
 		Activated = toggle,
 	}
-	local _attributes_4 = table.clone(styles.padding)
-	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uipadding", _attributes_4)
-	local _attributes_5 = {
+	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
+	end
+	_attributes_4.Text = title
+	local _exp_2 = React.createElement("textlabel", _attributes_4)
+	local _attributes_5 = {
+		key = "Icon",
+	}
+	for _k, _v in styles.icon do
 		_attributes_5[_k] = _v
 	end
-	_attributes_5.Text = title
-	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, React.createElement("textlabel", _attributes_5))
+	_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 = {
 		key = "Body",
 	}
@@ -85,7 +101,7 @@ local function Accordion(props)
 	end
 	local _attributes_7 = table.clone(styles.padding)
 	setmetatable(_attributes_7, nil)
-	return React.createElement("frame", _attributes, _exp, _exp_1, _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/accordion/components/Accordion.styles.d.ts

@@ -1,4 +1,5 @@
 declare const useAccordionStyles: (props: {
     open?: boolean;
+    disabled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAccordionStyles;

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

@@ -8,6 +8,7 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	if open == nil then
 		open = false
 	end
+	local disabled = _param.disabled
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -27,19 +28,30 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
-			Active = true,
-			Selectable = true,
+			Active = disabled ~= true,
+			Selectable = disabled ~= true,
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			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)),

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

@@ -1 +1,2 @@
 export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;
+export declare function accordionGlyph(open?: boolean): "expanded" | "collapsed";