@rbxts/uiblox 0.2.0-alpha.5 → 0.2.0-alpha.6

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

@@ -13,8 +13,10 @@ local function Alert(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local dismissible = onClose ~= nil
 	local styles = useAlertStyles({
 		severity = severity,
+		dismissible = dismissible,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -45,45 +47,50 @@ local function Alert(props)
 	local _attributes_3 = table.clone(styles.stroke)
 	setmetatable(_attributes_3, nil)
 	local _exp_2 = React.createElement("uistroke", _attributes_3)
-	local _attributes_4 = table.clone(styles.layout)
-	setmetatable(_attributes_4, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
-	local _condition_1 = title ~= nil and title ~= ""
+	local _condition_1 = dismissible
 	if _condition_1 then
-		local _attributes_5 = {
-			key = "Title",
+		local _attributes_4 = {
+			key = "Close",
 		}
-		for _k, _v in styles.title do
-			_attributes_5[_k] = _v
+		for _k, _v in styles.close do
+			_attributes_4[_k] = _v
 		end
-		_attributes_5.Text = title
-		_condition_1 = React.createElement("textlabel", _attributes_5)
+		_attributes_4.Image = tostring(Icons.Close)
+		_attributes_4.Event = {
+			Activated = function()
+				return onClose()
+			end,
+		}
+		_condition_1 = (React.createElement("imagebutton", _attributes_4))
 	end
-	local _attributes_5 = {
-		key = "Message",
+	local _attributes_4 = {
+		key = "Body",
 	}
-	for _k, _v in styles.message do
-		_attributes_5[_k] = _v
+	for _k, _v in styles.body do
+		_attributes_4[_k] = _v
 	end
-	_attributes_5.Text = message
-	local _exp_4 = React.createElement("textlabel", _attributes_5)
-	local _condition_2 = onClose ~= nil
+	local _attributes_5 = table.clone(styles.layout)
+	setmetatable(_attributes_5, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	local _condition_2 = title ~= nil and title ~= ""
 	if _condition_2 then
 		local _attributes_6 = {
-			key = "Close",
+			key = "Title",
 		}
-		for _k, _v in styles.close do
+		for _k, _v in styles.title do
 			_attributes_6[_k] = _v
 		end
-		_attributes_6.Image = tostring(Icons.Close)
-		_attributes_6.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_6))
+		_attributes_6.Text = title
+		_condition_2 = React.createElement("textlabel", _attributes_6)
+	end
+	local _attributes_6 = {
+		key = "Message",
+	}
+	for _k, _v in styles.message do
+		_attributes_6[_k] = _v
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_1, _exp_4, _condition_2)
+	_attributes_6.Text = message
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("frame", _attributes_4, _exp_3, _condition_2, React.createElement("textlabel", _attributes_6)))
 end
 local default = Alert
 return {

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

@@ -1,5 +1,6 @@
 import { AlertSeverity } from "./alertTone";
 declare const useAlertStyles: (props: {
     severity?: AlertSeverity;
+    dismissible?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAlertStyles;

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

@@ -6,7 +6,9 @@ local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
+	local dismissible = _param.dismissible
 	local tone = theme.palette.status[alertSeverity(severity)]
+	local closeSize = theme.spacing.calc(2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -29,6 +31,12 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			Transparency = 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		layout = {
 			FillDirection = Enum.FillDirection.Vertical,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
@@ -68,8 +76,8 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
 	_object.close = {
-		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
-		Position = UDim2.new(1, -theme.padding.calc(1), 0, theme.padding.calc(1)),
+		Size = UDim2.fromOffset(closeSize, closeSize),
+		Position = UDim2.new(1, 0, 0, 0),
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,

package/out/ui/packages/checkbox/components/checkboxLook.d.ts

@@ -2,4 +2,4 @@ export type CheckboxPointer = "rest" | "hover" | "press" | "focus";
 export declare function checkboxMark(value: boolean, mixed?: boolean): "" | "–" | "✓";
 export declare function checkboxPointer(hovering: boolean, pressed: boolean, focused: boolean): CheckboxPointer;
 export declare function checkboxBoxTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 1 | 0 | 0.7 | 0.55 | 0.85;
-export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.55 | 0.45 | 0.2;
+export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.45 | 0.55 | 0.2;

package/out/ui/packages/circularProgress/components/CircularProgress.luau

@@ -10,6 +10,7 @@ local _motion = TS.import(script, script.Parent.Parent.Parent, "motion")
 local arcKeys = _motion.arcKeys
 local loopProperty = _motion.loopProperty
 local progressSpin = _motion.progressSpin
+local spinArcKeys = _motion.spinArcKeys
 local function CircularProgress(props)
 	local _binding = props
 	local value = _binding.value
@@ -38,7 +39,17 @@ local function CircularProgress(props)
 	local shown = if indeterminate then (if motion == "spin" then nil else 0.25) else value
 	local _result
 	if shown == nil then
-		_result = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.35, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(0.65, 1), NumberSequenceKeypoint.new(1, 1) })
+		local _exp = spinArcKeys()
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#_exp)
+		local _callback = function(key)
+			return NumberSequenceKeypoint.new(key.time, key.transparency)
+		end
+		for _k, _v in _exp do
+			_newValue[_k] = _callback(_v, _k - 1, _exp)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = NumberSequence.new(_newValue)
 	else
 		local _exp = arcKeys(shown)
 		-- ▼ ReadonlyArray.map ▼
@@ -91,7 +102,7 @@ local function CircularProgress(props)
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,
-		Transparency = if disabled then 0.75 else 0.7,
+		Transparency = if disabled then 0.85 else 0.82,
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,

package/out/ui/packages/imageList/components/ImageList.d.ts

@@ -0,0 +1,14 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ImageListItem {
+    src: string;
+    title?: string;
+}
+export interface ImageListProps {
+    items: ImageListItem[];
+    cols?: number;
+    gap?: number;
+    itemSize?: number;
+    onItemActivated?: (index: number) => void;
+}
+declare function ImageList(props: CustomizedProps<Frame, ImageListProps>): JSX.Element;
+export default ImageList;

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

@@ -0,0 +1,84 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
+local function ImageList(props)
+	local _binding = props
+	local items = _binding.items
+	local cols = _binding.cols
+	local gap = _binding.gap
+	local itemSize = _binding.itemSize
+	local onItemActivated = _binding.onItemActivated
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useImageListStyles({
+		cols = cols,
+		gap = gap,
+		itemSize = itemSize,
+	})
+	local _attributes = {}
+	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
+	local _attributes_1 = table.clone(styles.grid)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uigridlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item, index)
+		local _attributes_2 = {
+			key = `Tile-{index}`,
+		}
+		for _k, _v in styles.tile do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Event = {
+			Activated = function()
+				local _result = onItemActivated
+				if _result ~= nil then
+					_result = _result(index)
+				end
+				return _result
+			end,
+		}
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		local _exp_1 = React.createElement("uicorner", _attributes_3)
+		local _attributes_4 = {
+			key = "Image",
+		}
+		for _k, _v in styles.image do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Image = item.src
+		return React.createElement("imagebutton", _attributes_2, _exp_1, React.createElement("imagelabel", _attributes_4))
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = ImageList
+return {
+	default = default,
+}

package/out/ui/packages/imageList/components/ImageList.styles.d.ts

@@ -0,0 +1,6 @@
+declare const useImageListStyles: (props: {
+    cols?: number;
+    gap?: number;
+    itemSize?: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useImageListStyles;

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

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCols = _imageListLayout.imageListCols
+local imageListGap = _imageListLayout.imageListGap
+local imageListItemSize = _imageListLayout.imageListItemSize
+local useImageListStyles = componentStyles("ImageList", function(theme, _param)
+	local cols = _param.cols
+	local gap = _param.gap
+	local itemSize = _param.itemSize
+	local size = imageListItemSize(itemSize)
+	local pad = theme.spacing.calc(imageListGap(gap))
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		grid = {
+			CellSize = UDim2.fromOffset(size, size),
+			CellPadding = UDim2.fromOffset(pad, pad),
+			FillDirection = Enum.FillDirection.Horizontal,
+			FillDirectionMaxCells = imageListCols(cols),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			StartCorner = Enum.StartCorner.TopLeft,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+		},
+		tile = {
+			Size = UDim2.fromOffset(size, size),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		image = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Crop,
+		},
+	})
+end)
+local default = useImageListStyles
+return {
+	default = default,
+}

package/out/ui/packages/imageList/components/imageListLayout.d.ts

@@ -0,0 +1,3 @@
+export declare function imageListCols(cols?: number): number;
+export declare function imageListGap(gap?: number): number;
+export declare function imageListItemSize(itemSize?: number): number;

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

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local function imageListCols(cols)
+	if cols == nil or cols < 1 then
+		return 3
+	end
+	return math.floor(cols)
+end
+local function imageListGap(gap)
+	if gap == nil or gap < 0 then
+		return 1
+	end
+	return gap
+end
+local function imageListItemSize(itemSize)
+	if itemSize == nil or itemSize < 1 then
+		return 96
+	end
+	return math.floor(itemSize)
+end
+return {
+	imageListCols = imageListCols,
+	imageListGap = imageListGap,
+	imageListItemSize = imageListItemSize,
+}

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

@@ -0,0 +1,2 @@
+export { default as ImageList } from "./components/ImageList";
+export { ImageListProps, ImageListItem } from "./components/ImageList";

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

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ImageList = TS.import(script, script, "components", "ImageList").default
+return exports

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

@@ -3,6 +3,7 @@ export * from "./skeleton/index";
 export * from "./divider/index";
 export * from "./errorBoundary/index";
 export * from "./icon/index";
+export * from "./imageList/index";
 export * from "./iconButton/index";
 export * from "./input/index";
 export * from "./formText/index";

package/out/ui/packages/init.luau

@@ -16,6 +16,9 @@ end
 for _k, _v in TS.import(script, script, "icon") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "imageList") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "iconButton") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/layout/components/Box.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+import { BoxPad } from "./boxPad";
+import { BoxBg } from "./Box.styles";
+export interface BoxProps {
+    padding?: BoxPad;
+    bgcolor?: BoxBg;
+    children?: React.ReactNode;
+}
+declare function Box(props: CustomizedProps<Frame, BoxProps>): JSX.Element;
+export default Box;

package/out/ui/packages/layout/components/Box.luau

@@ -0,0 +1,49 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBoxStyles = TS.import(script, script.Parent, "Box.styles").default
+local function Box(props)
+	local _binding = props
+	local padding = _binding.padding
+	local bgcolor = _binding.bgcolor
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBoxStyles({
+		padding = padding,
+		bgcolor = bgcolor,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Box"
+	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
+	local _condition_1 = padding ~= nil
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.padding)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uipadding", _attributes_1)
+	end
+	return React.createElement("frame", _attributes, _condition_1, children)
+end
+local default = Box
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/Box.styles.d.ts

@@ -0,0 +1,7 @@
+import { BoxPad } from "./boxPad";
+export type BoxBg = "transparent" | "paper" | "elevated" | "input";
+declare const useBoxStyles: (props: {
+    padding?: BoxPad;
+    bgcolor?: BoxBg;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useBoxStyles;

package/out/ui/packages/layout/components/Box.styles.luau

@@ -0,0 +1,34 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
+local useBoxStyles = componentStyles("Box", function(theme, _param)
+	local padding = _param.padding
+	local bgcolor = _param.bgcolor
+	if bgcolor == nil then
+		bgcolor = "transparent"
+	end
+	local sides = boxPadSides(padding)
+	local fill = if bgcolor == "paper" then theme.palette.surface.paper elseif bgcolor == "elevated" then theme.palette.surface.elevated elseif bgcolor == "input" then theme.palette.surface.input else theme.palette.surface.paper
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundColor3 = fill,
+			BackgroundTransparency = if bgcolor == "transparent" then 1 else 0,
+			BorderSizePixel = 0,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.spacing.calc(sides.top)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(sides.right)),
+			PaddingBottom = UDim.new(0, theme.spacing.calc(sides.bottom)),
+			PaddingLeft = UDim.new(0, theme.spacing.calc(sides.left)),
+		},
+	})
+end)
+local default = useBoxStyles
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/boxPad.d.ts

@@ -0,0 +1,14 @@
+export type BoxPad = number | {
+    x?: number;
+    y?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export declare function boxPadSides(padding?: BoxPad): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/out/ui/packages/layout/components/boxPad.luau

@@ -0,0 +1,59 @@
+-- Compiled with roblox-ts v3.0.0
+local function boxPadSides(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
+return {
+	boxPadSides = boxPadSides,
+}

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

@@ -7,3 +7,7 @@ export * from "./components/List";
 export { default as Stack } from "./components/Stack";
 export { StackProps } from "./components/Stack";
 export { StackAlign, StackDirection, StackJustify } from "./components/stackAlign";
+export { default as Box } from "./components/Box";
+export { BoxProps } from "./components/Box";
+export { BoxPad } from "./components/boxPad";
+export { BoxBg } from "./components/Box.styles";

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

@@ -10,4 +10,5 @@ for _k, _v in TS.import(script, script, "components", "List") or {} do
 	exports[_k] = _v
 end
 exports.Stack = TS.import(script, script, "components", "Stack").default
+exports.Box = TS.import(script, script, "components", "Box").default
 return exports

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

@@ -2,4 +2,4 @@ export { loopProperty } from "./loop";
 export { motionDuration, assignGoal } from "./duration";
 export { playProperty } from "./play";
 export { resolveReduced } from "./resolveReduced";
-export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys } from "./unit";
+export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys, spinArcKeys } from "./unit";

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

@@ -13,4 +13,5 @@ exports.stopOnce = _unit.stopOnce
 exports.progressUnit = _unit.progressUnit
 exports.progressSpin = _unit.progressSpin
 exports.arcKeys = _unit.arcKeys
+exports.spinArcKeys = _unit.spinArcKeys
 return exports

package/out/ui/packages/motion/unit.d.ts

@@ -6,3 +6,8 @@ export declare function arcKeys(value: number): {
     time: number;
     transparency: number;
 }[];
+/** Indeterminate ring: long clear trail, bright head — reads as a sweep. */
+export declare function spinArcKeys(): {
+    time: number;
+    transparency: number;
+}[];

package/out/ui/packages/motion/unit.luau

@@ -71,10 +71,33 @@ local function arcKeys(value)
 		transparency = 1,
 	} }
 end
+--* Indeterminate ring: long clear trail, bright head — reads as a sweep. 
+local function spinArcKeys()
+	return { {
+		time = 0,
+		transparency = 1,
+	}, {
+		time = 0.45,
+		transparency = 1,
+	}, {
+		time = 0.7,
+		transparency = 0.55,
+	}, {
+		time = 0.88,
+		transparency = 0,
+	}, {
+		time = 0.96,
+		transparency = 0.35,
+	}, {
+		time = 1,
+		transparency = 1,
+	} }
+end
 return {
 	clampUnit = clampUnit,
 	stopOnce = stopOnce,
 	progressUnit = progressUnit,
 	progressSpin = progressSpin,
 	arcKeys = arcKeys,
+	spinArcKeys = spinArcKeys,
 }

package/out/ui/packages/radioGroup/components/RadioGroup.d.ts

@@ -11,6 +11,7 @@ export interface RadioGroupProps<T> {
     onChange: (value: T) => void;
     disabled?: boolean;
     size?: ControlSize;
+    row?: boolean;
 }
 declare function RadioGroup<T>(props: CustomizedProps<Frame, RadioGroupProps<T>>): JSX.Element;
 export default RadioGroup;

package/out/ui/packages/radioGroup/components/RadioGroup.luau

@@ -10,17 +10,19 @@ local function RadioGroup(props)
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
 	local size = _binding.size
+	local row = _binding.row
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useRadioGroupStyles({
 		size = size,
+		row = row,
 	})
 	local root = _binding_1.root
 	local list = _binding_1.list
 	local option = _binding_1.option
-	local row = _binding_1.row
+	local optionRow = _binding_1.optionRow
 	local ring = _binding_1.ring
 	local dot = _binding_1.dot
 	local stroke = _binding_1.stroke
@@ -70,7 +72,7 @@ local function RadioGroup(props)
 				end
 			end,
 		}
-		local _attributes_3 = table.clone(row)
+		local _attributes_3 = table.clone(optionRow)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uilistlayout", _attributes_3)
 		local _attributes_4 = table.clone(ring)

package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts

@@ -1,6 +1,7 @@
 import { ControlSize } from "../../../../theme/index";
 export interface RadioGroupStyleProps {
     size?: ControlSize;
+    row?: boolean;
 }
 declare const useRadioGroupStyles: (props: RadioGroupStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useRadioGroupStyles;

package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau

@@ -6,6 +6,7 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param)
 	local size = _param.size
+	local row = _param.row
 	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = {
@@ -15,8 +16,10 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 		},
 		list = {
+			FillDirection = if row == true then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
 			Padding = UDim.new(0, theme.padding.default),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
 		},
 		option = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -25,7 +28,7 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 			Text = "",
 		},
-		row = {
+		optionRow = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, theme.padding.default),
 			VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/ui/packages/skeleton/components/Skeleton.styles.luau

@@ -3,16 +3,20 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local skeletonTone = TS.import(script, script.Parent, "skeletonTone").skeletonTone
 local useSkeletonStyles = componentStyles("Skeleton", function(theme)
+	local _binding = skeletonTone(theme)
+	local bone = _binding.bone
+	local shine = _binding.shine
 	return createStyles({
 		block = {
-			BackgroundColor3 = theme.palette.divider,
+			BackgroundColor3 = bone,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 		},
 		highlight = {
-			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, theme.palette.divider), ColorSequenceKeypoint.new(0.5, theme.palette.text.secondary), ColorSequenceKeypoint.new(1, theme.palette.divider) }),
-			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.25), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.25) }),
+			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, bone), ColorSequenceKeypoint.new(0.5, shine), ColorSequenceKeypoint.new(1, bone) }),
+			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.35), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.35) }),
 		},
 		rounded = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/skeleton/components/skeletonTone.d.ts

@@ -0,0 +1,20 @@
+interface SkeletonPalette {
+    surface: {
+        canvas: Color3;
+        elevated: Color3;
+    };
+    action: {
+        hover: Color3;
+    };
+    text: {
+        secondary: Color3;
+    };
+}
+/** Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. */
+export declare function skeletonTone(theme: {
+    palette: SkeletonPalette;
+}): {
+    bone: Color3;
+    shine: Color3;
+};
+export {};

package/out/ui/packages/skeleton/components/skeletonTone.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local relativeLuminance = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "utilites", "colorMath").relativeLuminance
+--* Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. 
+local function skeletonTone(theme)
+	local lightCanvas = relativeLuminance(theme.palette.surface.canvas) > 0.5
+	return {
+		bone = theme.palette.action.hover,
+		shine = if lightCanvas then theme.palette.surface.elevated else theme.palette.text.secondary,
+	}
+end
+return {
+	skeletonTone = skeletonTone,
+}

package/out/ui/packages/splitPane/components/splitLook.d.ts

@@ -1,5 +1,5 @@
 export type SplitPointer = "rest" | "hover" | "press";
 export declare function splitPointer(hovering: boolean, pressed: boolean): SplitPointer;
-export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.35 | 0.7 | 0.55;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
 export declare function splitMarkTransparency(pointer: SplitPointer, disabled?: boolean): 0 | 0.55 | 0.1;
 export declare function splitHitTransparency(pointer: SplitPointer, disabled?: boolean): 1 | 0.9 | 0.94;

package/out/ui/packages/stateMatrix.d.ts

@@ -26,5 +26,6 @@ export interface StateCapture {
     indeterminate?: boolean;
     size?: StateSize;
     density?: StateDensity;
+    row?: boolean;
 }
 export declare const stateMatrix: StateCapture[];

package/out/ui/packages/stateMatrix.luau

@@ -713,29 +713,37 @@ local function togglesRows()
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("RadioGroup", "size-small", {
+	local _array_33 = pair("RadioGroup", "row", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "small",
+		row = true,
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("RadioGroup", "size-large", {
+	local _array_34 = pair("RadioGroup", "size-small", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "large",
+		size = "small",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("RadioGroup", "density-compact", {
+	local _array_35 = pair("RadioGroup", "size-large", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		size = "large",
+	})
+	local _Length_34 = #_array_35
+	table.move(_array_35, 1, _Length_34, _length + 1, _array)
+	_length += _Length_34
+	local _array_36 = pair("RadioGroup", "density-compact", {
 		value = "Continue",
 		options = { "Continue", "Other" },
 		density = "compact",
 		size = "small",
 	})
-	table.move(_array_35, 1, #_array_35, _length + 1, _array)
+	table.move(_array_36, 1, #_array_36, _length + 1, _array)
 	return _array
 end
 local function compositeRows()
@@ -1638,75 +1646,107 @@ local function miscRows()
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("SpeedDial", "closed", {
-		open = false,
-	})
+	local _array_22 = pair("Box", "plain")
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_23 = pair("Box", "padded", {
+		size = "medium",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_24 = pair("Box", "paper", {
+		variant = "paper",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("FormLabel", "default", {
-		text = "Email",
-	})
+	local _array_25 = pair("ImageList", "default")
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_26 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("FormLabel", "error", {
-		text = "Email",
-		hasError = true,
+	local _array_27 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_28 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_29 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Menu", "closed", {
+	local _array_30 = pair("SpeedDial", "disabled", {
 		open = false,
+		disabled = true,
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Menu", "open", {
-		open = true,
+	local _array_31 = pair("FormLabel", "default", {
+		text = "Email",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Menu", "empty", {
+	local _array_32 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
+	})
+	local _Length_31 = #_array_32
+	table.move(_array_32, 1, _Length_31, _length + 1, _array)
+	_length += _Length_31
+	local _array_33 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
+	})
+	local _Length_32 = #_array_33
+	table.move(_array_33, 1, _Length_32, _length + 1, _array)
+	_length += _Length_32
+	local _array_34 = pair("FormHelperText", "default", {
+		text = "We never share this",
+	})
+	local _Length_33 = #_array_34
+	table.move(_array_34, 1, _Length_33, _length + 1, _array)
+	_length += _Length_33
+	local _array_35 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
+	})
+	local _Length_34 = #_array_35
+	table.move(_array_35, 1, _Length_34, _length + 1, _array)
+	_length += _Length_34
+	local _array_36 = pair("Menu", "closed", {
+		open = false,
+	})
+	local _Length_35 = #_array_36
+	table.move(_array_36, 1, _Length_35, _length + 1, _array)
+	_length += _Length_35
+	local _array_37 = pair("Menu", "open", {
+		open = true,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("Menu", "empty", {
 		open = true,
 		options = {},
 	})
-	table.move(_array_32, 1, #_array_32, _length + 1, _array)
+	table.move(_array_38, 1, #_array_38, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

package/out/ui/packages/switch/components/switchLook.d.ts

@@ -1,6 +1,6 @@
 export type SwitchPointer = "rest" | "hover" | "press" | "focus";
 export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
-export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.35 | 0.65 | 0.55 | 0.15 | 0.08;
+export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.55 | 0.35 | 0.15 | 0.65 | 0.08;
 export declare function switchThumbTransparency(disabled: boolean): 0 | 0.35;
 export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0 | 0.35;
 export declare function switchThumbPlacement(on: boolean, inset: number): {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.5",
+	"version": "0.2.0-alpha.6",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
 		"pack:check": "node scripts/pack-check.mjs",
-		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
 		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [