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

package/out/ui/packages/udimEditor/components/UDimEditor.luau

@@ -1,7 +1,6 @@
 -- 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 NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local _vectorValue = TS.import(script, script.Parent.Parent.Parent, "vectorEditor", "components", "vectorValue")
 local writeUDim = _vectorValue.writeUDim
@@ -42,21 +41,26 @@ local function UDimEditor(props)
 			onChange = commit,
 		})))
 	end
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "UDimEditor"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
+	_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.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -115,7 +119,7 @@ local function UDimEditor(props)
 			return onChange(writeUDim(value, "Offset", amount))
 		end, 2)))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _result)
+	return React.createElement("frame", _attributes, _exp, _result)
 end
 local default = UDimEditor
 return {

package/out/ui/packages/vectorEditor/components/VectorEditor.luau

@@ -1,7 +1,6 @@
 -- 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 NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useVectorEditorStyles = TS.import(script, script.Parent, "VectorEditor.styles").default
 local _vectorValue = TS.import(script, script.Parent, "vectorValue")
@@ -20,21 +19,26 @@ local function VectorEditor(props)
 	local styles = useVectorEditorStyles()
 	local isVector3 = typeof(value) == "Vector3"
 	local axes = props.axes or (if isVector3 then ({ "X", "Y", "Z" }) else ({ "X", "Y" }))
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "VectorEditor"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
+	_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.row)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -75,7 +79,7 @@ local function VectorEditor(props)
 		_newValue[_k] = _callback(_v, _k - 1, axes)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement("frame", _attributes, _exp, _newValue)
 end
 local default = VectorEditor
 return {

package/out/ui/packages/virtualList/components/EmptyListHint.d.ts

@@ -1,7 +1,6 @@
-import { CustomizedProps } from "../../../../theme/index";
 export interface EmptyListHintProps {
     text: string;
     height?: number;
 }
-declare function EmptyListHint(props: CustomizedProps<TextLabel, EmptyListHintProps>): JSX.Element;
+declare function EmptyListHint(props: EmptyListHintProps): JSX.Element;
 export default EmptyListHint;

package/out/ui/packages/virtualList/components/EmptyListHint.luau

@@ -2,16 +2,11 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useEmptyListHintStyles = TS.import(script, script.Parent, "EmptyListHint.styles").default
 local function EmptyListHint(props)
 	local _binding = props
 	local text = _binding.text
 	local height = _binding.height
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local _object = {}
@@ -23,19 +18,13 @@ local function EmptyListHint(props)
 	_object[_left] = _condition
 	local styles = useEmptyListHintStyles(_object)
 	local _attributes = {
-		tag = "textlabel",
+		key = "EmptyListHint",
 	}
-	local _condition_1 = id
-	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-		_condition_1 = "EmptyListHint"
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
 	end
-	_attributes.key = _condition_1
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
 	_attributes.Text = text
-	return React.createElement(SxHost, _attributes)
+	return React.createElement("textlabel", _attributes)
 end
 local default = EmptyListHint
 return {

package/out/ui/packages/virtualList/components/VirtualList.luau

@@ -5,7 +5,6 @@ local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
 local useState = _react.useState
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useDragScroll = TS.import(script, script.Parent.Parent.Parent, "scroll").useDragScroll
 local useVirtualListStyles = TS.import(script, script.Parent, "VirtualList.styles").default
 local _virtualWindow = TS.import(script, script.Parent, "virtualWindow")
@@ -143,15 +142,13 @@ local function VirtualList(props)
 			end
 		end
 	end
-	local _attributes = {
-		tag = "scrollingframe",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "VirtualList"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = function(rbx)
+	_attributes.ref = function(rbx)
 		setFrame(rbx)
 		if type(ref) == "function" then
 			ref(rbx)
@@ -159,11 +156,21 @@ local function VirtualList(props)
 			ref.current = rbx
 		end
 	end
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
+	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.CanvasSize = UDim2.fromOffset(0, canvasHeight)
-	return React.createElement(SxHost, _attributes, if count == 0 then empty else rows, children)
+	return React.createElement("scrollingframe", _attributes, if count == 0 then empty else rows, children)
 end
 local default = VirtualList
 return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.36",
+	"version": "0.2.0-alpha.5",
 	"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/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.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 scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.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/viewport-observer.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-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/imageList.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/table-columns.check.mjs && node --experimental-strip-types scripts/reorder.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/flex-item.check.mjs && node --experimental-strip-types scripts/grid.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/scroll-view.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/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.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/date-range.check.mjs && node --experimental-strip-types scripts/sparkline.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/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": [

package/out/hooks/viewportObserver.d.ts

@@ -1,10 +0,0 @@
-type Size = {
-    width: number;
-    height: number;
-};
-type Listener = (size: Size) => void;
-/** One AbsoluteSize connection per host; shared by all subscribers. */
-export declare function observeViewport(host: GuiObject, listener: Listener): () => void;
-/** Test helper — drop all host observers. */
-export declare function clearViewportObservers(): void;
-export {};

package/out/hooks/viewportObserver.luau

@@ -1,75 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local hosts = {}
---* One AbsoluteSize connection per host; shared by all subscribers. 
-local function observeViewport(host, listener)
-	local _host = host
-	local entry = hosts[_host]
-	if entry == nil then
-		entry = {
-			listeners = {},
-			size = {
-				width = host.AbsoluteSize.X,
-				height = host.AbsoluteSize.Y,
-			},
-		}
-		local _host_1 = host
-		local _entry = entry
-		hosts[_host_1] = _entry
-		local read = function()
-			local _host_2 = host
-			local current = hosts[_host_2]
-			if current == nil then
-				return nil
-			end
-			current.size = {
-				width = host.AbsoluteSize.X,
-				height = host.AbsoluteSize.Y,
-			}
-			for _, cb in current.listeners do
-				cb(current.size)
-			end
-		end
-		read()
-		entry.connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
-	end
-	local _listeners = entry.listeners
-	local _listener = listener
-	table.insert(_listeners, _listener)
-	listener(entry.size)
-	return function()
-		local _host_1 = host
-		local current = hosts[_host_1]
-		if current == nil then
-			return nil
-		end
-		local _listeners_1 = current.listeners
-		local _listener_1 = listener
-		local index = (table.find(_listeners_1, _listener_1) or 0) - 1
-		if index >= 0 then
-			table.remove(current.listeners, index + 1)
-		end
-		if #current.listeners == 0 then
-			local _result = current.connection
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-			local _host_2 = host
-			hosts[_host_2] = nil
-		end
-	end
-end
---* Test helper — drop all host observers. 
-local function clearViewportObservers()
-	for _, entry in hosts do
-		local _result = entry.connection
-		if _result ~= nil then
-			_result:Disconnect()
-		end
-		table.clear(entry.listeners)
-	end
-	table.clear(hosts)
-end
-return {
-	observeViewport = observeViewport,
-	clearViewportObservers = clearViewportObservers,
-}

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

@@ -1,120 +0,0 @@
-/** Dot-path into `theme.palette` (typed for common roles). */
-export type PaletteToken = "surface.canvas" | "surface.paper" | "surface.elevated" | "surface.overlay" | "surface.input" | "primary.main" | "primary.on" | "primary.hover" | "primary.pressed" | "accent.main" | "accent.on" | "accent.hover" | "accent.pressed" | "text.primary" | "text.secondary" | "text.disabled" | "text.inverse" | "text.link" | "border" | "divider" | "focus" | "action.hover" | "action.pressed" | "action.selected" | "action.disabled" | "status.success.main" | "status.success.on" | "status.success.surface" | "status.success.border" | "status.warning.main" | "status.warning.on" | "status.warning.surface" | "status.warning.border" | "status.error.main" | "status.error.on" | "status.error.surface" | "status.error.border" | "status.info.main" | "status.info.on" | "status.info.surface" | "status.info.border" | "backdrop" | "shadow";
-export declare function resolvePaletteToken(palette: object, token: PaletteToken | Color3): Color3;
-/** Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. */
-type Responsive<T> = T | {
-    phone?: T;
-    tablet?: T;
-    desktop?: T;
-};
-type PadInput = number | {
-    x?: number;
-    y?: number;
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
-interface SxTheme {
-    spacing: {
-        calc: (multiple: number) => number;
-    };
-    palette: object;
-    typography: {
-        fontFamilies: {
-            [family: string]: Enum.Font;
-        };
-        variants: {
-            [name: string]: {
-                size: number;
-                family: string;
-            };
-        };
-    };
-}
-export type SxColor = PaletteToken | Color3;
-/** Evenly spaced color stops on a UIGradient child. */
-export interface SxGradient {
-    colors: SxColor[];
-    rotation?: number;
-}
-/** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
-export type SxInput = {
-    width?: Responsive<number | UDim | UDim2>;
-    height?: Responsive<number | UDim | UDim2>;
-    w?: Responsive<number | UDim | UDim2>;
-    h?: Responsive<number | UDim | UDim2>;
-    size?: Responsive<UDim2 | {
-        width?: number | UDim;
-        height?: number | UDim;
-    }>;
-    x?: Responsive<number | UDim>;
-    y?: Responsive<number | UDim>;
-    position?: Responsive<UDim2>;
-    pos?: Responsive<UDim2>;
-    anchor?: Responsive<Vector2 | number | [number, number]>;
-    p?: Responsive<number>;
-    px?: Responsive<number>;
-    py?: Responsive<number>;
-    pt?: Responsive<number>;
-    pr?: Responsive<number>;
-    pb?: Responsive<number>;
-    pl?: Responsive<number>;
-    padding?: Responsive<PadInput>;
-    gap?: Responsive<number>;
-    bgcolor?: Responsive<SxColor>;
-    bg?: Responsive<SxColor>;
-    backgroundColor?: Responsive<SxColor>;
-    color?: Responsive<SxColor>;
-    borderColor?: Responsive<SxColor>;
-    opacity?: Responsive<number>;
-    transparency?: Responsive<number>;
-    border?: Responsive<number>;
-    borderWidth?: Responsive<number>;
-    radius?: Responsive<number>;
-    typography?: Responsive<string>;
-    fontSize?: Responsive<number>;
-    font?: Responsive<Enum.Font | string>;
-    visible?: Responsive<boolean>;
-    zIndex?: Responsive<number>;
-    z?: Responsive<number>;
-    gradient?: Responsive<SxGradient>;
-    _hover?: SxInput;
-    _pressed?: SxInput;
-    _focus?: SxInput;
-    _focusVisible?: SxInput;
-    _disabled?: SxInput;
-    _selected?: SxInput;
-    _checked?: SxInput;
-    _loading?: SxInput;
-    _first?: SxInput;
-    _last?: SxInput;
-    _odd?: SxInput;
-    _even?: SxInput;
-    [key: string]: unknown;
-};
-export interface ResolvedSx {
-    root: {
-        [key: string]: unknown;
-    };
-    padding?: {
-        PaddingTop: UDim;
-        PaddingRight: UDim;
-        PaddingBottom: UDim;
-        PaddingLeft: UDim;
-    };
-    corner?: {
-        CornerRadius: UDim;
-    };
-    gap?: number;
-    gradient?: {
-        Color: ColorSequence;
-        Rotation: number;
-    };
-}
-/**
- * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
- * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
- */
-export declare function resolveSx(theme: SxTheme, sx?: SxInput, width?: number): ResolvedSx;
-export {};