@rbxts/uiblox 0.2.0-alpha.25 → 0.2.0-alpha.27

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/accordion/components/Accordion.luau

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
 local accordionGlyph = _accordionOpen.accordionGlyph
 local accordionOpen = _accordionOpen.accordionOpen
@@ -40,26 +41,21 @@ local function Accordion(props)
 			_result(nextOpen)
 		end
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Accordion"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _condition_1 = square ~= true
 	if _condition_1 then
 		local _attributes_1 = table.clone(styles.corner)
@@ -105,7 +101,7 @@ local function Accordion(props)
 	end
 	local _attributes_7 = table.clone(styles.padding)
 	setmetatable(_attributes_7, nil)
-	return React.createElement("frame", _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
 end
 local default = Accordion
 return {

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

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
 local function Alert(props)
 	local _binding = props
@@ -21,26 +22,18 @@ local function Alert(props)
 		dismissible = dismissible,
 		filled = filled,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Alert"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
@@ -96,7 +89,7 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	return React.createElement("frame", _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
 end
 local default = Alert
 return {

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

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAppBarStyles = TS.import(script, script.Parent, "AppBar.styles").default
 local function AppBar(props)
 	local _binding = props
@@ -27,26 +28,18 @@ local function AppBar(props)
 		color = color,
 		hasActions = children ~= nil,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AppBar"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
@@ -74,7 +67,7 @@ local function AppBar(props)
 		setmetatable(_attributes_3, nil)
 		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uilistlayout", _attributes_3), children))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1, _condition_2)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1, _condition_2)
 end
 local default = AppBar
 return {

package/out/ui/packages/assetField/components/AssetField.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local useAssetFieldStyles = TS.import(script, script.Parent, "AssetField.styles").default
 local assetPreviewUri = TS.import(script, script.Parent, "assetPreviewUri").assetPreviewUri
@@ -23,26 +24,21 @@ local function AssetField(props)
 	local ref = _binding.ref
 	local styles = useAssetFieldStyles()
 	local uri = if preview == true then assetPreviewUri(value) else nil
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "AssetField"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -67,7 +63,7 @@ local function AssetField(props)
 		setmetatable(_attributes_3, nil)
 		_condition_1 = (React.createElement("imagelabel", _attributes_2, React.createElement("uicorner", _attributes_3)))
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _condition_1)
 end
 local default = AssetField
 return {

package/out/ui/packages/avatar/components/Avatar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local avatarInitials = TS.import(script, script.Parent, "avatarText").avatarInitials
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useAvatarStyles = TS.import(script, script.Parent, "Avatar.styles").default
 local function Avatar(props)
 	local _binding = props
@@ -23,26 +24,18 @@ local function Avatar(props)
 		size = size,
 		variant = variant,
 	})
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Avatar"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _condition_1 = variant ~= "square"
 	if _condition_1 then
 		local _attributes_1 = table.clone(styles.corner)
@@ -69,7 +62,7 @@ local function Avatar(props)
 		_attributes_1.Text = avatarInitials(name)
 		_result = (React.createElement("textlabel", _attributes_1))
 	end
-	return React.createElement("frame", _attributes, _condition_1, _result)
+	return React.createElement(SxHost, _attributes, _condition_1, _result)
 end
 local default = Avatar
 return {

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
 local function Backdrop(props)
 	local _binding = props
@@ -21,26 +22,18 @@ local function Backdrop(props)
 	if open ~= true then
 		return nil
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "textbutton",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Backdrop"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	_attributes.Event = {
 		Activated = function()
 			local _result = onClick
@@ -50,7 +43,7 @@ local function Backdrop(props)
 			return _result
 		end,
 	}
-	return React.createElement("textbutton", _attributes, children)
+	return React.createElement(SxHost, _attributes, children)
 end
 local default = Backdrop
 return {

package/out/ui/packages/badge/components/Badge.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local badgeText = TS.import(script, script.Parent, "badgeValue").badgeText
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBadgeStyles = TS.import(script, script.Parent, "Badge.styles").default
 local function Badge(props)
 	local _binding = props
@@ -36,26 +37,18 @@ local function Badge(props)
 	})
 	local isDot = variant == "dot"
 	local shown = not invisible and (isDot or count > 0)
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Badge"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _exp = children
 	local _condition_1 = shown
 	if _condition_1 then
@@ -76,7 +69,7 @@ local function Badge(props)
 		setmetatable(_attributes_2, nil)
 		_condition_1 = (React.createElement("textlabel", _attributes_1, _condition_2, React.createElement("uicorner", _attributes_2)))
 	end
-	return React.createElement("frame", _attributes, _exp, _condition_1)
+	return React.createElement(SxHost, _attributes, _exp, _condition_1)
 end
 local default = Badge
 return {

package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBottomNavigationStyles = TS.import(script, script.Parent, "BottomNavigation.styles").default
 local function BottomNavigation(props)
 	local _binding = props
@@ -22,26 +23,21 @@ local function BottomNavigation(props)
 		showLabels = showLabels,
 	})
 	local count = math.max(#options, 1)
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "BottomNavigation"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -84,7 +80,7 @@ local function BottomNavigation(props)
 		_newValue[_k] = _callback(_v, _k - 1, options)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
 end
 local default = BottomNavigation
 return {

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau

@@ -5,6 +5,7 @@ local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local _breadcrumbItems = TS.import(script, script.Parent, "breadcrumbItems")
 local breadcrumbCurrent = _breadcrumbItems.breadcrumbCurrent
 local breadcrumbVisible = _breadcrumbItems.breadcrumbVisible
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBreadcrumbStyles = TS.import(script, script.Parent, "Breadcrumbs.styles").default
 local function Breadcrumbs(props)
 	local _binding = props
@@ -20,26 +21,18 @@ local function Breadcrumbs(props)
 	local ref = _binding.ref
 	local styles = useBreadcrumbStyles()
 	local visible = breadcrumbVisible(items, maxItems)
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Breadcrumbs"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -108,7 +101,7 @@ local function Breadcrumbs(props)
 		_newValue[_k] = _callback(_v, _k - 1, visible)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
 end
 local default = Breadcrumbs
 return {