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

package/README.md

@@ -2,13 +2,35 @@
 
 # uiblox-rbxts
 
+> This package is a work in progress.
+
 UI library and theming for roblox-ts projects.
 
+## Background
+
+Roblox has their own internal design system, coined "uiblox-web", that it uses for its new
+web-facing products. This system offers reusable components, implemented in
+React Typescript, that are derived from material UI (MUI). As well, it offers a
+common theme/pallete for consistent UI/UX.
+
+Anyone is able to view their design system as
+[UIBlox-Web](https://uiblox.roblox.com). You can see that they leverage
+[Storybook](https://storybook.js.org), a UI component explorer for frontend
+developers, to render component previews.
+
+Design systems all help engineers cut down on implementation time and ensure
+consitent UX across products.
+
 ## Overview
 
-Uiblox is a roblox-ts UI kit: semantic themes, `makeStyles` / `createStyles`, and typed React components for Studio and games. Public APIs aim for familiar Material UI–style capability (props and behavior), implemented independently for Roblox Instances, input modes, and performance.
+So what is uiblox-rbxts? Simply put, its my stab at a design system that mimics
+uiblox-web for games written using roblox-ts.
 
-Main exports from `@rbxts/uiblox`:
+UIBlox-rbxts aims to provide extensible components that can be reusable by
+anyone who installs this npm package. It also offers a theme and styling system
+that aids UI/UX consistentency.
+
+How does it do this? Well, there are two main exports from this package:
 
 -   @rbxts/uiblox -> theme
     -   An extensible Theme type + default Dark (default) and Light themes
@@ -24,47 +46,11 @@ Main exports from `@rbxts/uiblox`:
 
 ### Installation
 
-```
-npm install @rbxts/uiblox
-```
-
-## Quickstart
+Install the package to get started.
 
-1. Wrap your app (or a subtree) in `ThemeProvider` with `DarkTheme` or `LightTheme`.
-2. Build styles with `makeStyles` / `createStyles` (or `componentStyles`) and spread them onto Instances.
-3. For hover/press/focus/disabled (and list `_first` / `_last`), put `_hover`-style keys on the style table and call `resolveStyle(style, state)` before spreading.
-4. Use packaged components from `@rbxts/uiblox` (`Button`, `Input`, `Select`, …).
-5. Preview components in [Storyblox](https://github.com/bjlarouche/storyblox) with `*.stories` modules.
+`npm install @rbxts/uiblox`
 
-Token reference (spacing, density, typography, shape, palette, `resolveStyle`): [docs/STYLING.md](docs/STYLING.md).
-
-```tsx
-import React from "@rbxts/react";
-import { Button, DarkTheme, ThemeProvider } from "@rbxts/uiblox";
-
-export function App() {
-	return (
-		<ThemeProvider theme={DarkTheme}>
-			<Button text="Continue" onLeftClick={() => {}} />
-		</ThemeProvider>
-	);
-}
-```
-
-## Parity checklist
-
-Capability parity, not pixel parity. For each public component, expect:
-
-- [ ] Typed controlled props where interaction needs state
-- [ ] Theme tokens (light/dark) via `ThemeProvider`
-- [ ] Style slots / variants through the styling helpers
-- [ ] Disabled / loading / error when the control type warrants it
-- [ ] Mouse, touch, and gamepad-friendly activation where interactive
-- [ ] Cleanup and focused unit checks in-repo
-- [ ] `stateMatrix` rows for visual capture planning
-- [ ] A Storyblox story (dev fixtures OK)
-
-Skipped on purpose: browser-only addons (MDX, iframes, hosted visual-review clouds).
+Spacing, density, and sx notes are in [docs/STYLING.md](docs/STYLING.md).
 
 ## Example
 
@@ -211,74 +197,6 @@ const useMyComponentStyles = makeStyles<MyComponentProps>((theme: Theme, props:
 export default useMyComponentStyles;
 ```
 
-### Style precedence
-
-Components spread their own styles first, then `className`, then the props that
-carry state. Later always wins:
-
-1. Component styles from the theme
-2. `className` (merge several with `cx(a, condition && b)`; later args win, falsy
-   args are skipped)
-3. State props the component owns: `Active`, `Selectable`, `Text`, and the
-   value-driven sizes/positions of Slider, SplitPane, and so on
-
-So `className` can restyle anything except a control's state. Pass `disabled`
-instead of overriding `Active`.
-
-### Controls
-
-Inputs are controlled: `{ value, onChange, disabled? }`. They call `onChange`
-only when the value actually changes, and never while disabled.
-
-| Component | Value | Notes |
-| --- | --- | --- |
-| Checkbox | `boolean` | `mixed` shows indeterminate; activating commits `true` |
-| Switch | `boolean` | |
-| RadioGroup / Select / Tabs | `T` from `options: { label, value: T, disabled? }[]` | compared by identity; disabled options are skipped |
-| NumberInput | `number` | commits on focus lost or Enter; clamps to `min`/`max`, snaps to `step` |
-| Slider | `number` | `onChange` while dragging, `onCommit` on release |
-| SplitPane | first pane size (px) | display clamps to `min`/`max`; Escape cancels a drag |
-| Input | `text` | `onInput` while typing, `onTextChanged` on commit |
-
-Select and Tooltip render through `Popup`, which portals into the nearest
-`LayerCollector` so clipping parents do not cut them off. The popup follows its
-anchor when that anchor moves or resizes, and Select closes if the anchor leaves
-the layer. Select handles Up, Down, Enter, and Escape while it is open or
-selected, including when the pointer is not over it.
-
-### Loading
-
-`Skeleton` covers a block that is still loading. `variant` is `text`,
-`rectangular`, `rounded`, or `circular`. `width` and `height` are pixels.
-`lines` and `gap` stack text rows. `SkeletonText` is the text variant.
-`animation` is `pulse`, `shimmer`, or `false`. `reducedMotion` holds the block
-still. A later theme preference can set that prop for you.
-
-`CircularProgress` spins while `value` is omitted. A `value` from 0 to 1 draws
-an arc and stops the spin. `size`, `thickness`, and `color` restyle the ring.
-`LinearProgress` is the existing `ProgressBar`: pass `value` from 0 to 1 or
-`progress` from 0 to 100. `indeterminate` slides the bar. `disabled` and
-`reducedMotion` stop the motion and fade the fill.
-
-`Button` and `IconButton` take `loading`. The control ignores clicks, hover,
-and focus while loading, and its size stays put. `loadingLabel` replaces the
-caption. `loadingPosition` is `start`, `center`, or `end`. `reducedMotion`
-keeps the spinner still.
-
-### State captures
-
-`stateMatrix` is the gallery list for Storyblox. Each row is one shot: `theme`
-(`Dark` or `Light`), `width`, and `pointer` (`rest`, `hover`, `press`, or
-`focus`). Rows are built in small helper functions and concatenated so the
-compiled Luau chunk stays under the 200-local register limit. `open` means the
-Select list is showing. `options` and `disabledOption` build RadioGroup, Select,
-and Tabs. `selected` and `filter` are TreeView. `value`, `text`, `disabled`,
-`loading`, `mixed`, `hasError`, and `placeholder` are that control's props.
-`variant`, `animation` (`pulse`, `shimmer`, or `false`), `reducedMotion`, and
-`indeterminate` cover skeleton and progress shots. Those shots stay still when
-`animation` is `false` or `reducedMotion` is set. Hover, press, and focus rows
-are only there when the control actually changes.
-
 ### Client
 
 Some sample logic for mounting app when player spawns (on client).

package/out/ui/packages/fab/components/Fab.luau

@@ -134,25 +134,31 @@ local function Fab(props)
 	local _exp_1 = React.createElement(Shadow)
 	local _result_1
 	if extended then
-		local _attributes_2 = table.clone(styles.padding)
-		setmetatable(_attributes_2, nil)
-		local _exp_2 = React.createElement("uipadding", _attributes_2)
-		local _attributes_3 = table.clone(styles.row)
+		local _attributes_2 = {
+			key = "Content",
+		}
+		for _k, _v in styles.content do
+			_attributes_2[_k] = _v
+		end
+		local _attributes_3 = table.clone(styles.padding)
 		setmetatable(_attributes_3, nil)
-		local _exp_3 = React.createElement("uilistlayout", _attributes_3)
+		local _exp_2 = React.createElement("uipadding", _attributes_3)
+		local _attributes_4 = table.clone(styles.row)
+		setmetatable(_attributes_4, nil)
+		local _exp_3 = React.createElement("uilistlayout", _attributes_4)
 		local _exp_4 = iconEl
 		local _condition_1 = not loading
 		if _condition_1 then
-			local _attributes_4 = {
+			local _attributes_5 = {
 				key = "Label",
 			}
 			for _k, _v in styles.label do
-				_attributes_4[_k] = _v
+				_attributes_5[_k] = _v
 			end
-			_attributes_4.Text = label
-			_condition_1 = React.createElement("textlabel", _attributes_4)
+			_attributes_5.Text = label
+			_condition_1 = React.createElement("textlabel", _attributes_5)
 		end
-		_result_1 = (React.createElement(React.Fragment, nil, _exp_2, _exp_3, _exp_4, _condition_1))
+		_result_1 = (React.createElement("frame", _attributes_2, _exp_2, _exp_3, _exp_4, _condition_1))
 	else
 		_result_1 = iconEl
 	end

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -31,6 +31,12 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(1, 0),
 		},
+		content = {
+			Size = UDim2.new(0, 0, 0, diameter),
+			AutomaticSize = Enum.AutomaticSize.X,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		padding = {
 			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
 			PaddingRight = UDim.new(0, theme.padding.calc(2.5)),

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

@@ -72,6 +72,7 @@ local function SxHost(props)
 	local paint = paintHostStyle(theme, _exp, _exp_1, sx, width, _object)
 	local rest = hostRest(props)
 	local caller = rest.Event
+	local pressable = tag == "textbutton" or tag == "imagebutton"
 	local _object_1 = {}
 	if caller then
 		for _k, _v in caller do
@@ -103,30 +104,6 @@ local function SxHost(props)
 			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
@@ -152,6 +129,34 @@ local function SxHost(props)
 		end
 	end
 	rest.Event = _object_1
+	-- GuiButton-only; Frames reject MouseButton1* and crash Select/Menu hosts.
+	if pressable then
+		local events = rest.Event
+		events.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
+		events.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
+	end
 	local nodes = React.Children.toArray(props.children)
 	local painted = {}
 	local hasPad = false

package/out/ui/packages/shadow/components/Shadow.luau

@@ -9,8 +9,10 @@ local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").defaul
 local function Shadow(props)
 	local _binding = useShadowStyles()
 	local container = _binding.container
+	local blob = _binding.blob
 	local parent, setParent = useState(nil)
 	local cornerRadius, setCornerRadius = useState()
+	local blobSize, setBlobSize = useState(UDim2.fromOffset(0, 0))
 	local _binding_1 = props
 	local className = _binding_1.className
 	local sx = _binding_1.sx
@@ -22,30 +24,30 @@ local function Shadow(props)
 	end
 	local defaultZIndex = _condition
 	local zIndex, setZIndex = useState(defaultZIndex)
-	-- Set any inherited properties
 	useEffect(function()
 		if not parent then
 			return nil
 		end
-		local _cornerRadius = parent
+		local _cornerRadius = parent:FindFirstChildOfClass("UICorner")
 		if _cornerRadius ~= nil then
-			_cornerRadius = _cornerRadius:FindFirstChildOfClass("UICorner")
-			if _cornerRadius ~= nil then
-				_cornerRadius = _cornerRadius.CornerRadius
-			end
+			_cornerRadius = _cornerRadius.CornerRadius
 		end
 		local cornerRadius = _cornerRadius
 		setCornerRadius(cornerRadius)
-		local _result = parent
-		if _result ~= nil then
-			_result = _result.ZIndex
-		end
-		local _condition_1 = _result
+		local _condition_1 = parent.ZIndex
 		if _condition_1 == nil then
 			_condition_1 = defaultZIndex
 		end
 		setZIndex(_condition_1 - 1)
 		parent.ClipsDescendants = false
+		local sync = function()
+			setBlobSize(UDim2.fromOffset(parent.AbsoluteSize.X, parent.AbsoluteSize.Y))
+		end
+		sync()
+		local conn = parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(sync)
+		return function()
+			return conn:Disconnect()
+		end
 	end, { parent })
 	local _attributes = {
 		tag = "frame",
@@ -67,10 +69,18 @@ local function Shadow(props)
 			end
 		end,
 	}
-	return React.createElement(SxHost, _attributes, cornerRadius ~= nil and React.createElement("uicorner", {
+	local _attributes_1 = {
+		key = "Blob",
+	}
+	for _k, _v in blob do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.Size = blobSize
+	_attributes_1.ZIndex = zIndex
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = cornerRadius,
-	}))
+	})))
 end
 local default = Shadow
 return {

package/out/ui/packages/shadow/components/Shadow.styles.luau

@@ -6,11 +6,16 @@ local componentStyles = _theme.componentStyles
 local useShadowStyles = componentStyles("Shadow", function(theme)
 	return createStyles({
 		container = {
-			Size = UDim2.new(1, theme.spacing.calc(0.25), 1, theme.spacing.calc(0.25)),
+			Size = UDim2.fromOffset(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = -100,
+		},
+		blob = {
 			BackgroundColor3 = theme.palette.shadow,
 			BackgroundTransparency = 0.8,
 			BorderSizePixel = 0,
-			ZIndex = -100,
+			Position = UDim2.fromOffset(theme.spacing.calc(0.25), theme.spacing.calc(0.25)),
 		},
 	})
 end)

package/out/ui/packages/stateMatrix.luau

@@ -1957,84 +1957,97 @@ local function chromeRows()
 	local _Length_54 = #_array_55
 	table.move(_array_55, 1, _Length_54, _length + 1, _array)
 	_length += _Length_54
-	local _array_56 = pair("Fab", "small", {
-		size = "small",
+	local _array_56 = pair("Fab", "extended-narrow", {
+		text = "Compose",
+		width = 128,
 	})
 	local _Length_55 = #_array_56
 	table.move(_array_56, 1, _Length_55, _length + 1, _array)
 	_length += _Length_55
-	local _array_57 = pair("Fab", "large", {
-		size = "large",
+	local _array_57 = pair("Fab", "small", {
+		size = "small",
 	})
 	local _Length_56 = #_array_57
 	table.move(_array_57, 1, _Length_56, _length + 1, _array)
 	_length += _Length_56
-	local _array_58 = pair("Fab", "disabled", {
-		disabled = true,
+	local _array_58 = pair("Fab", "medium", {
+		size = "medium",
 	})
 	local _Length_57 = #_array_58
 	table.move(_array_58, 1, _Length_57, _length + 1, _array)
 	_length += _Length_57
-	local _array_59 = pair("Fab", "loading", {
-		loading = true,
+	local _array_59 = pair("Fab", "large", {
+		size = "large",
 	})
 	local _Length_58 = #_array_59
 	table.move(_array_59, 1, _Length_58, _length + 1, _array)
 	_length += _Length_58
-	local _array_60 = pair("Fab", "accent", {
-		variant = "accent",
+	local _array_60 = pair("Fab", "disabled", {
+		disabled = true,
 	})
 	local _Length_59 = #_array_60
 	table.move(_array_60, 1, _Length_59, _length + 1, _array)
 	_length += _Length_59
-	local _array_61 = pair("Fab", "sx", {
-		variant = "sx",
+	local _array_61 = pair("Fab", "loading", {
+		loading = true,
 	})
 	local _Length_60 = #_array_61
 	table.move(_array_61, 1, _Length_60, _length + 1, _array)
 	_length += _Length_60
-	local _array_62 = pair("AppBar", "default", {
-		text = "Storyblox",
+	local _array_62 = pair("Fab", "accent", {
+		variant = "accent",
 	})
 	local _Length_61 = #_array_62
 	table.move(_array_62, 1, _Length_61, _length + 1, _array)
 	_length += _Length_61
-	local _array_63 = pair("AppBar", "flat", {
-		text = "Storyblox",
-		variant = "flat",
+	local _array_63 = pair("Fab", "sx", {
+		variant = "sx",
 	})
 	local _Length_62 = #_array_63
 	table.move(_array_63, 1, _Length_62, _length + 1, _array)
 	_length += _Length_62
-	local _array_64 = pair("AppBar", "raised", {
+	local _array_64 = pair("AppBar", "default", {
 		text = "Storyblox",
-		variant = "raised",
 	})
 	local _Length_63 = #_array_64
 	table.move(_array_64, 1, _Length_63, _length + 1, _array)
 	_length += _Length_63
-	local _array_65 = pair("AppBar", "primary", {
+	local _array_65 = pair("AppBar", "flat", {
 		text = "Storyblox",
-		variant = "primary",
+		variant = "flat",
 	})
 	local _Length_64 = #_array_65
 	table.move(_array_65, 1, _Length_64, _length + 1, _array)
 	_length += _Length_64
-	local _array_66 = pair("AppBar", "sx", {
+	local _array_66 = pair("AppBar", "raised", {
 		text = "Storyblox",
-		variant = "sx",
+		variant = "raised",
 	})
 	local _Length_65 = #_array_66
 	table.move(_array_66, 1, _Length_65, _length + 1, _array)
 	_length += _Length_65
-	local _array_67 = pair("BottomNavigation", "default", {
+	local _array_67 = pair("AppBar", "primary", {
+		text = "Storyblox",
+		variant = "primary",
+	})
+	local _Length_66 = #_array_67
+	table.move(_array_67, 1, _Length_66, _length + 1, _array)
+	_length += _Length_66
+	local _array_68 = pair("AppBar", "sx", {
+		text = "Storyblox",
+		variant = "sx",
+	})
+	local _Length_67 = #_array_68
+	table.move(_array_68, 1, _Length_67, _length + 1, _array)
+	_length += _Length_67
+	local _array_69 = pair("BottomNavigation", "default", {
 		value = "Home",
 		options = { "Home", "Search", "Profile" },
 	})
-	table.move(_array_67, 1, #_array_67, _length + 1, _array)
+	table.move(_array_69, 1, #_array_69, _length + 1, _array)
 	return _array
 end
-local function miscRows()
+local function miscRowsA()
 	local _array = {}
 	local _length = #_array
 	local _array_1 = pair("BottomNavigation", "selected", {
@@ -2383,306 +2396,309 @@ local function miscRows()
 	local _array_54 = pair("StyleSx", "loading", {
 		loading = true,
 	})
-	local _Length_53 = #_array_54
-	table.move(_array_54, 1, _Length_53, _length + 1, _array)
-	_length += _Length_53
-	local _array_55 = pair("Container", "default", {
+	table.move(_array_54, 1, #_array_54, _length + 1, _array)
+	return _array
+end
+local function miscRowsB()
+	local _array = {}
+	local _length = #_array
+	local _array_1 = pair("Container", "default", {
 		variant = "lg",
 	})
-	local _Length_54 = #_array_55
-	table.move(_array_55, 1, _Length_54, _length + 1, _array)
-	_length += _Length_54
-	local _array_56 = pair("Container", "sm", {
+	local _Length = #_array_1
+	table.move(_array_1, 1, _Length, _length + 1, _array)
+	_length += _Length
+	local _array_2 = pair("Container", "sm", {
 		variant = "sm",
 	})
-	local _Length_55 = #_array_56
-	table.move(_array_56, 1, _Length_55, _length + 1, _array)
-	_length += _Length_55
-	local _array_57 = pair("Container", "fluid", {
+	local _Length_1 = #_array_2
+	table.move(_array_2, 1, _Length_1, _length + 1, _array)
+	_length += _Length_1
+	local _array_3 = pair("Container", "fluid", {
 		variant = "false",
 	})
-	local _Length_56 = #_array_57
-	table.move(_array_57, 1, _Length_56, _length + 1, _array)
-	_length += _Length_56
-	local _array_58 = pair("Backdrop", "default")
-	local _Length_57 = #_array_58
-	table.move(_array_58, 1, _Length_57, _length + 1, _array)
-	_length += _Length_57
-	local _array_59 = pair("Backdrop", "invisible", {
+	local _Length_2 = #_array_3
+	table.move(_array_3, 1, _Length_2, _length + 1, _array)
+	_length += _Length_2
+	local _array_4 = pair("Backdrop", "default")
+	local _Length_3 = #_array_4
+	table.move(_array_4, 1, _Length_3, _length + 1, _array)
+	_length += _Length_3
+	local _array_5 = pair("Backdrop", "invisible", {
 		variant = "invisible",
 	})
-	local _Length_58 = #_array_59
-	table.move(_array_59, 1, _Length_58, _length + 1, _array)
-	_length += _Length_58
-	local _array_60 = pair("Backdrop", "closed", {
+	local _Length_4 = #_array_5
+	table.move(_array_5, 1, _Length_4, _length + 1, _array)
+	_length += _Length_4
+	local _array_6 = pair("Backdrop", "closed", {
 		open = false,
 	})
-	local _Length_59 = #_array_60
-	table.move(_array_60, 1, _Length_59, _length + 1, _array)
-	_length += _Length_59
-	local _array_61 = pair("Backdrop", "sx", {
+	local _Length_5 = #_array_6
+	table.move(_array_6, 1, _Length_5, _length + 1, _array)
+	_length += _Length_5
+	local _array_7 = pair("Backdrop", "sx", {
 		variant = "sx",
 	})
-	local _Length_60 = #_array_61
-	table.move(_array_61, 1, _Length_60, _length + 1, _array)
-	_length += _Length_60
-	local _array_62 = pair("Sidebar", "sx", {
+	local _Length_6 = #_array_7
+	table.move(_array_7, 1, _Length_6, _length + 1, _array)
+	_length += _Length_6
+	local _array_8 = pair("Sidebar", "sx", {
 		variant = "sx",
 	})
-	local _Length_61 = #_array_62
-	table.move(_array_62, 1, _Length_61, _length + 1, _array)
-	_length += _Length_61
-	local _array_63 = pair("Divider", "horizontal", {
+	local _Length_7 = #_array_8
+	table.move(_array_8, 1, _Length_7, _length + 1, _array)
+	_length += _Length_7
+	local _array_9 = pair("Divider", "horizontal", {
 		variant = "horizontal",
 	})
-	local _Length_62 = #_array_63
-	table.move(_array_63, 1, _Length_62, _length + 1, _array)
-	_length += _Length_62
-	local _array_64 = pair("Divider", "vertical", {
+	local _Length_8 = #_array_9
+	table.move(_array_9, 1, _Length_8, _length + 1, _array)
+	_length += _Length_8
+	local _array_10 = pair("Divider", "vertical", {
 		variant = "vertical",
 	})
-	local _Length_63 = #_array_64
-	table.move(_array_64, 1, _Length_63, _length + 1, _array)
-	_length += _Length_63
-	local _array_65 = pair("Divider", "label", {
+	local _Length_9 = #_array_10
+	table.move(_array_10, 1, _Length_9, _length + 1, _array)
+	_length += _Length_9
+	local _array_11 = pair("Divider", "label", {
 		text = "Or",
 	})
-	local _Length_64 = #_array_65
-	table.move(_array_65, 1, _Length_64, _length + 1, _array)
-	_length += _Length_64
-	local _array_66 = pair("Divider", "sx", {
+	local _Length_10 = #_array_11
+	table.move(_array_11, 1, _Length_10, _length + 1, _array)
+	_length += _Length_10
+	local _array_12 = pair("Divider", "sx", {
 		variant = "sx",
 	})
-	local _Length_65 = #_array_66
-	table.move(_array_66, 1, _Length_65, _length + 1, _array)
-	_length += _Length_65
-	local _array_67 = pair("Icon", "sx", {
+	local _Length_11 = #_array_12
+	table.move(_array_12, 1, _Length_11, _length + 1, _array)
+	_length += _Length_11
+	local _array_13 = pair("Icon", "sx", {
 		variant = "sx",
 	})
-	local _Length_66 = #_array_67
-	table.move(_array_67, 1, _Length_66, _length + 1, _array)
-	_length += _Length_66
-	local _array_68 = pair("ImageList", "default")
-	local _Length_67 = #_array_68
-	table.move(_array_68, 1, _Length_67, _length + 1, _array)
-	_length += _Length_67
-	local _array_69 = pair("ImageList", "dense", {
+	local _Length_12 = #_array_13
+	table.move(_array_13, 1, _Length_12, _length + 1, _array)
+	_length += _Length_12
+	local _array_14 = pair("ImageList", "default")
+	local _Length_13 = #_array_14
+	table.move(_array_14, 1, _Length_13, _length + 1, _array)
+	_length += _Length_13
+	local _array_15 = pair("ImageList", "dense", {
 		size = "small",
 	})
-	local _Length_68 = #_array_69
-	table.move(_array_69, 1, _Length_68, _length + 1, _array)
-	_length += _Length_68
-	local _array_70 = pair("ImageList", "wide", {
+	local _Length_14 = #_array_15
+	table.move(_array_15, 1, _Length_14, _length + 1, _array)
+	_length += _Length_14
+	local _array_16 = pair("ImageList", "wide", {
 		size = "large",
 	})
-	local _Length_69 = #_array_70
-	table.move(_array_70, 1, _Length_69, _length + 1, _array)
-	_length += _Length_69
-	local _array_71 = pair("ImageList", "titled", {
+	local _Length_15 = #_array_16
+	table.move(_array_16, 1, _Length_15, _length + 1, _array)
+	_length += _Length_15
+	local _array_17 = pair("ImageList", "titled", {
 		text = "Cove",
 	})
-	local _Length_70 = #_array_71
-	table.move(_array_71, 1, _Length_70, _length + 1, _array)
-	_length += _Length_70
-	local _array_72 = pair("ImageList", "untitled", {
+	local _Length_16 = #_array_17
+	table.move(_array_17, 1, _Length_16, _length + 1, _array)
+	_length += _Length_16
+	local _array_18 = pair("ImageList", "untitled", {
 		text = "",
 	})
-	local _Length_71 = #_array_72
-	table.move(_array_72, 1, _Length_71, _length + 1, _array)
-	_length += _Length_71
-	local _array_73 = pair("ImageList", "sx")
-	local _Length_72 = #_array_73
-	table.move(_array_73, 1, _Length_72, _length + 1, _array)
-	_length += _Length_72
-	local _array_74 = pair("SpeedDial", "closed", {
+	local _Length_17 = #_array_18
+	table.move(_array_18, 1, _Length_17, _length + 1, _array)
+	_length += _Length_17
+	local _array_19 = pair("ImageList", "sx")
+	local _Length_18 = #_array_19
+	table.move(_array_19, 1, _Length_18, _length + 1, _array)
+	_length += _Length_18
+	local _array_20 = pair("SpeedDial", "closed", {
 		open = false,
 	})
-	local _Length_73 = #_array_74
-	table.move(_array_74, 1, _Length_73, _length + 1, _array)
-	_length += _Length_73
-	local _array_75 = pair("SpeedDial", "open", {
+	local _Length_19 = #_array_20
+	table.move(_array_20, 1, _Length_19, _length + 1, _array)
+	_length += _Length_19
+	local _array_21 = pair("SpeedDial", "open", {
 		open = true,
 	})
-	local _Length_74 = #_array_75
-	table.move(_array_75, 1, _Length_74, _length + 1, _array)
-	_length += _Length_74
-	local _array_76 = pair("SpeedDial", "disabled", {
+	local _Length_20 = #_array_21
+	table.move(_array_21, 1, _Length_20, _length + 1, _array)
+	_length += _Length_20
+	local _array_22 = pair("SpeedDial", "disabled", {
 		open = false,
 		disabled = true,
 	})
-	local _Length_75 = #_array_76
-	table.move(_array_76, 1, _Length_75, _length + 1, _array)
-	_length += _Length_75
-	local _array_77 = pair("SpeedDial", "down", {
+	local _Length_21 = #_array_22
+	table.move(_array_22, 1, _Length_21, _length + 1, _array)
+	_length += _Length_21
+	local _array_23 = pair("SpeedDial", "down", {
 		open = true,
 		variant = "down",
 	})
-	local _Length_76 = #_array_77
-	table.move(_array_77, 1, _Length_76, _length + 1, _array)
-	_length += _Length_76
-	local _array_78 = pair("SpeedDial", "sx", {
+	local _Length_22 = #_array_23
+	table.move(_array_23, 1, _Length_22, _length + 1, _array)
+	_length += _Length_22
+	local _array_24 = pair("SpeedDial", "sx", {
 		open = false,
 	})
-	local _Length_77 = #_array_78
-	table.move(_array_78, 1, _Length_77, _length + 1, _array)
-	_length += _Length_77
-	local _array_79 = pair("List", "sx")
-	local _Length_78 = #_array_79
-	table.move(_array_79, 1, _Length_78, _length + 1, _array)
-	_length += _Length_78
-	local _array_80 = pair("Preloader", "sx")
-	local _Length_79 = #_array_80
-	table.move(_array_80, 1, _Length_79, _length + 1, _array)
-	_length += _Length_79
-	local _array_81 = pair("VirtualList", "sx")
-	local _Length_80 = #_array_81
-	table.move(_array_81, 1, _Length_80, _length + 1, _array)
-	_length += _Length_80
-	local _array_82 = pair("FormLabel", "default", {
+	local _Length_23 = #_array_24
+	table.move(_array_24, 1, _Length_23, _length + 1, _array)
+	_length += _Length_23
+	local _array_25 = pair("List", "sx")
+	local _Length_24 = #_array_25
+	table.move(_array_25, 1, _Length_24, _length + 1, _array)
+	_length += _Length_24
+	local _array_26 = pair("Preloader", "sx")
+	local _Length_25 = #_array_26
+	table.move(_array_26, 1, _Length_25, _length + 1, _array)
+	_length += _Length_25
+	local _array_27 = pair("VirtualList", "sx")
+	local _Length_26 = #_array_27
+	table.move(_array_27, 1, _Length_26, _length + 1, _array)
+	_length += _Length_26
+	local _array_28 = pair("FormLabel", "default", {
 		text = "Email",
 	})
-	local _Length_81 = #_array_82
-	table.move(_array_82, 1, _Length_81, _length + 1, _array)
-	_length += _Length_81
-	local _array_83 = pair("FormLabel", "required", {
+	local _Length_27 = #_array_28
+	table.move(_array_28, 1, _Length_27, _length + 1, _array)
+	_length += _Length_27
+	local _array_29 = pair("FormLabel", "required", {
 		text = "Email",
 		value = true,
 	})
-	local _Length_82 = #_array_83
-	table.move(_array_83, 1, _Length_82, _length + 1, _array)
-	_length += _Length_82
-	local _array_84 = pair("FormLabel", "error", {
+	local _Length_28 = #_array_29
+	table.move(_array_29, 1, _Length_28, _length + 1, _array)
+	_length += _Length_28
+	local _array_30 = pair("FormLabel", "error", {
 		text = "Email",
 		hasError = true,
 	})
-	local _Length_83 = #_array_84
-	table.move(_array_84, 1, _Length_83, _length + 1, _array)
-	_length += _Length_83
-	local _array_85 = pair("FormLabel", "sx", {
+	local _Length_29 = #_array_30
+	table.move(_array_30, 1, _Length_29, _length + 1, _array)
+	_length += _Length_29
+	local _array_31 = pair("FormLabel", "sx", {
 		text = "Email",
 		variant = "sx",
 	})
-	local _Length_84 = #_array_85
-	table.move(_array_85, 1, _Length_84, _length + 1, _array)
-	_length += _Length_84
-	local _array_86 = pair("FormHelperText", "default", {
+	local _Length_30 = #_array_31
+	table.move(_array_31, 1, _Length_30, _length + 1, _array)
+	_length += _Length_30
+	local _array_32 = pair("FormHelperText", "default", {
 		text = "We never share this",
 	})
-	local _Length_85 = #_array_86
-	table.move(_array_86, 1, _Length_85, _length + 1, _array)
-	_length += _Length_85
-	local _array_87 = pair("FormHelperText", "error", {
+	local _Length_31 = #_array_32
+	table.move(_array_32, 1, _Length_31, _length + 1, _array)
+	_length += _Length_31
+	local _array_33 = pair("FormHelperText", "error", {
 		text = "Required",
 		hasError = true,
 	})
-	local _Length_86 = #_array_87
-	table.move(_array_87, 1, _Length_86, _length + 1, _array)
-	_length += _Length_86
-	local _array_88 = pair("FormHelperText", "sx", {
+	local _Length_32 = #_array_33
+	table.move(_array_33, 1, _Length_32, _length + 1, _array)
+	_length += _Length_32
+	local _array_34 = pair("FormHelperText", "sx", {
 		text = "Hint",
 		variant = "sx",
 	})
-	local _Length_87 = #_array_88
-	table.move(_array_88, 1, _Length_87, _length + 1, _array)
-	_length += _Length_87
-	local _array_89 = pair("Typography", "sx", {
+	local _Length_33 = #_array_34
+	table.move(_array_34, 1, _Length_33, _length + 1, _array)
+	_length += _Length_33
+	local _array_35 = pair("Typography", "sx", {
 		text = "Title",
 		variant = "sx",
 	})
-	local _Length_88 = #_array_89
-	table.move(_array_89, 1, _Length_88, _length + 1, _array)
-	_length += _Length_88
-	local _array_90 = pair("Menu", "closed", {
+	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_89 = #_array_90
-	table.move(_array_90, 1, _Length_89, _length + 1, _array)
-	_length += _Length_89
-	local _array_91 = pair("Menu", "open", {
+	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_90 = #_array_91
-	table.move(_array_91, 1, _Length_90, _length + 1, _array)
-	_length += _Length_90
-	local _array_92 = pair("Menu", "empty", {
+	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 = {},
 	})
-	local _Length_91 = #_array_92
-	table.move(_array_92, 1, _Length_91, _length + 1, _array)
-	_length += _Length_91
-	local _array_93 = pair("Menu", "dense", {
+	local _Length_37 = #_array_38
+	table.move(_array_38, 1, _Length_37, _length + 1, _array)
+	_length += _Length_37
+	local _array_39 = pair("Menu", "dense", {
 		open = true,
 		variant = "dense",
 	})
-	local _Length_92 = #_array_93
-	table.move(_array_93, 1, _Length_92, _length + 1, _array)
-	_length += _Length_92
-	local _array_94 = pair("Menu", "selected", {
+	local _Length_38 = #_array_39
+	table.move(_array_39, 1, _Length_38, _length + 1, _array)
+	_length += _Length_38
+	local _array_40 = pair("Menu", "selected", {
 		open = true,
 		selected = "a",
 	})
-	local _Length_93 = #_array_94
-	table.move(_array_94, 1, _Length_93, _length + 1, _array)
-	_length += _Length_93
-	local _array_95 = pair("Menu", "sx", {
+	local _Length_39 = #_array_40
+	table.move(_array_40, 1, _Length_39, _length + 1, _array)
+	_length += _Length_39
+	local _array_41 = pair("Menu", "sx", {
 		open = true,
 	})
-	local _Length_94 = #_array_95
-	table.move(_array_95, 1, _Length_94, _length + 1, _array)
-	_length += _Length_94
-	local _array_96 = pair("Markdown", "default", {
+	local _Length_40 = #_array_41
+	table.move(_array_41, 1, _Length_40, _length + 1, _array)
+	_length += _Length_40
+	local _array_42 = pair("Markdown", "default", {
 		text = "# Title\n\nHello **world**",
 	})
-	local _Length_95 = #_array_96
-	table.move(_array_96, 1, _Length_95, _length + 1, _array)
-	_length += _Length_95
-	local _array_97 = pair("Markdown", "empty", {
+	local _Length_41 = #_array_42
+	table.move(_array_42, 1, _Length_41, _length + 1, _array)
+	_length += _Length_41
+	local _array_43 = pair("Markdown", "empty", {
 		text = "",
 	})
-	local _Length_96 = #_array_97
-	table.move(_array_97, 1, _Length_96, _length + 1, _array)
-	_length += _Length_96
-	local _array_98 = pair("Markdown", "sx", {
+	local _Length_42 = #_array_43
+	table.move(_array_43, 1, _Length_42, _length + 1, _array)
+	_length += _Length_42
+	local _array_44 = pair("Markdown", "sx", {
 		text = "# Title",
 	})
-	local _Length_97 = #_array_98
-	table.move(_array_98, 1, _Length_97, _length + 1, _array)
-	_length += _Length_97
-	local _array_99 = pair("MarkdownEditor", "split", {
+	local _Length_43 = #_array_44
+	table.move(_array_44, 1, _Length_43, _length + 1, _array)
+	_length += _Length_43
+	local _array_45 = pair("MarkdownEditor", "split", {
 		text = "# Title",
 		variant = "split",
 	})
-	local _Length_98 = #_array_99
-	table.move(_array_99, 1, _Length_98, _length + 1, _array)
-	_length += _Length_98
-	local _array_100 = pair("MarkdownEditor", "edit", {
+	local _Length_44 = #_array_45
+	table.move(_array_45, 1, _Length_44, _length + 1, _array)
+	_length += _Length_44
+	local _array_46 = pair("MarkdownEditor", "edit", {
 		text = "# Title",
 		variant = "edit",
 	})
-	local _Length_99 = #_array_100
-	table.move(_array_100, 1, _Length_99, _length + 1, _array)
-	_length += _Length_99
-	local _array_101 = pair("MarkdownEditor", "preview", {
+	local _Length_45 = #_array_46
+	table.move(_array_46, 1, _Length_45, _length + 1, _array)
+	_length += _Length_45
+	local _array_47 = pair("MarkdownEditor", "preview", {
 		text = "# Title",
 		variant = "preview",
 	})
-	local _Length_100 = #_array_101
-	table.move(_array_101, 1, _Length_100, _length + 1, _array)
-	_length += _Length_100
-	local _array_102 = pair("MarkdownEditor", "density-compact", {
+	local _Length_46 = #_array_47
+	table.move(_array_47, 1, _Length_46, _length + 1, _array)
+	_length += _Length_46
+	local _array_48 = pair("MarkdownEditor", "density-compact", {
 		text = "# Title",
 		density = "compact",
 		variant = "split",
 	})
-	local _Length_101 = #_array_102
-	table.move(_array_102, 1, _Length_101, _length + 1, _array)
-	_length += _Length_101
-	local _array_103 = pair("MarkdownEditor", "sx", {
+	local _Length_47 = #_array_48
+	table.move(_array_48, 1, _Length_47, _length + 1, _array)
+	_length += _Length_47
+	local _array_49 = pair("MarkdownEditor", "sx", {
 		text = "# Title",
 		variant = "split",
 	})
-	table.move(_array_103, 1, #_array_103, _length + 1, _array)
+	table.move(_array_49, 1, #_array_49, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)
@@ -2695,7 +2711,7 @@ local function concatRows(...)
 	end
 	return out
 end
-local stateMatrix = concatRows(controlsRows(), editorsRows(), togglesRows(), compositeRows(), surfacesRows(), chromeRows(), miscRows())
+local stateMatrix = concatRows(controlsRows(), editorsRows(), togglesRows(), compositeRows(), surfacesRows(), chromeRows(), miscRowsA(), miscRowsB())
 return {
 	stateMatrix = stateMatrix,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.26",
+	"version": "0.2.0-alpha.28",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",