@rbxts/uiblox 0.2.0-alpha.0 → 0.2.0-alpha.10

package/out/ui/packages/switch/components/Switch.styles.luau

@@ -47,7 +47,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 			TextWrapped = true,
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
 		stroke = {
 			Color = theme.palette.focus,

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/out/ui/packages/tabs/components/Tabs.d.ts

@@ -1,10 +1,12 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
+import { TabsOrientation } from "./tabsOrientation";
 export interface TabsProps<T> {
     value: T;
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    orientation?: TabsOrientation;
 }
 declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
 export default Tabs;

package/out/ui/packages/tabs/components/Tabs.luau

@@ -4,6 +4,7 @@ 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 stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
+local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
 local function Tabs(props)
 	local _binding = props
@@ -11,11 +12,15 @@ local function Tabs(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTabsStyles()
+	local styles = useTabsStyles({
+		orientation = orientation,
+	})
+	local vertical = tabsIsVertical(orientation)
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
@@ -36,9 +41,11 @@ local function Tabs(props)
 		end
 		-- ▲ ReadonlyArray.findIndex ▲
 		local index = _result
-		if input.KeyCode == Enum.KeyCode.Left then
+		local back = if vertical then Enum.KeyCode.Up else Enum.KeyCode.Left
+		local forward = if vertical then Enum.KeyCode.Down else Enum.KeyCode.Right
+		if input.KeyCode == back then
 			choose(stepChoice(options, index, -1))
-		elseif input.KeyCode == Enum.KeyCode.Right then
+		elseif input.KeyCode == forward then
 			choose(stepChoice(options, index, 1))
 		end
 	end

package/out/ui/packages/tabs/components/Tabs.styles.d.ts

@@ -1,2 +1,5 @@
-declare const useTabsStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+import { TabsOrientation } from "./tabsOrientation";
+declare const useTabsStyles: (props: {
+    orientation?: TabsOrientation;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useTabsStyles;

package/out/ui/packages/tabs/components/Tabs.styles.luau

@@ -3,32 +3,38 @@ 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 useTabsStyles = componentStyles("Tabs", function(theme)
+local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
+local useTabsStyles = componentStyles("Tabs", function(theme, _param)
+	local orientation = _param.orientation
+	local vertical = tabsIsVertical(orientation)
+	local bar = theme.padding.calc(0.5)
 	return createStyles({
 		root = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2.5)),
+			Size = if vertical then UDim2.new(0, theme.spacing.calc(16), 1, 0) else UDim2.new(1, 0, 0, theme.spacing.calc(4)),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			CanvasSize = UDim2.fromScale(0, 0),
-			AutomaticCanvasSize = Enum.AutomaticSize.X,
-			ScrollingDirection = Enum.ScrollingDirection.X,
+			AutomaticCanvasSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
+			ScrollingDirection = if vertical then Enum.ScrollingDirection.Y else Enum.ScrollingDirection.X,
 			HorizontalScrollBarInset = Enum.ScrollBarInset.Always,
+			VerticalScrollBarInset = Enum.ScrollBarInset.Always,
 			ScrollBarThickness = theme.padding.calc(0.5),
 			ScrollBarImageColor3 = theme.palette.text.secondary,
 		},
 		list = {
-			FillDirection = Enum.FillDirection.Horizontal,
+			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		tab = {
-			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.fromScale(0, 1),
+			AutomaticSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
+			Size = if vertical then UDim2.new(1, 0, 0, 0) else UDim2.fromScale(0, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			TextColor3 = theme.palette.text.secondary,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
+			TextXAlignment = if vertical then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
 		},
 		selected = {
 			TextColor3 = theme.palette.text.primary,
@@ -39,14 +45,22 @@ local useTabsStyles = componentStyles("Tabs", function(theme)
 		padding = {
 			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
 			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+			PaddingTop = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
+			PaddingBottom = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
 		},
-		indicator = {
-			Size = UDim2.new(1, theme.padding.calc(4), 0, theme.padding.calc(0.5)),
+		indicator = if vertical then ({
+			Size = UDim2.new(0, bar, 1, -theme.padding.calc(2)),
+			Position = UDim2.new(0, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = theme.palette.primary.main,
+			BorderSizePixel = 0,
+		}) else ({
+			Size = UDim2.new(1, theme.padding.calc(4), 0, bar),
 			Position = UDim2.fromScale(0.5, 1),
 			AnchorPoint = Vector2.new(0.5, 1),
 			BackgroundColor3 = theme.palette.primary.main,
 			BorderSizePixel = 0,
-		},
+		}),
 	})
 end)
 local default = useTabsStyles

package/out/ui/packages/tabs/components/tabsOrientation.d.ts

@@ -0,0 +1,2 @@
+export type TabsOrientation = "horizontal" | "vertical";
+export declare function tabsIsVertical(orientation?: TabsOrientation): orientation is "vertical";

package/out/ui/packages/tabs/components/tabsOrientation.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function tabsIsVertical(orientation)
+	return orientation == "vertical"
+end
+return {
+	tabsIsVertical = tabsIsVertical,
+}

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

@@ -1,2 +1,3 @@
 export { default as Tabs } from "./components/Tabs";
 export { TabsProps } from "./components/Tabs";
+export { TabsOrientation, tabsIsVertical } from "./components/tabsOrientation";

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

@@ -2,4 +2,5 @@
 local TS = _G[script]
 local exports = {}
 exports.Tabs = TS.import(script, script, "components", "Tabs").default
+exports.tabsIsVertical = TS.import(script, script, "components", "tabsOrientation").tabsIsVertical
 return exports

package/out/ui/packages/toast/components/Toast.styles.luau

@@ -62,7 +62,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50001,
 		},
 		close = {
-			Size = UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1)),
+			Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
 			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(1, 0),
 			ImageColor3 = toastColors.content,

package/out/ui/packages/toggleButton/components/ToggleButton.d.ts

@@ -0,0 +1,17 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { ChoiceOption } from "../../radioGroup/index";
+export interface ToggleButtonProps {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onActivated?: () => void;
+}
+declare function ToggleButton(props: CustomizedProps<TextButton, ToggleButtonProps>): JSX.Element;
+export interface ToggleButtonGroupProps<T> {
+    value: T;
+    options: ChoiceOption<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+}
+export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
+export default ToggleButton;

package/out/ui/packages/toggleButton/components/ToggleButton.luau

@@ -0,0 +1,126 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local useToggleButtonStyles = TS.import(script, script.Parent, "ToggleButton.styles").default
+local function ToggleButton(props)
+	local _binding = props
+	local label = _binding.label
+	local selected = _binding.selected
+	local disabled = _binding.disabled
+	local onActivated = _binding.onActivated
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useToggleButtonStyles({
+		selected = selected,
+		disabled = disabled,
+	})
+	local active = canActivate(disabled)
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ToggleButton"
+	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.Text = label
+	_attributes.Active = active
+	_attributes.Selectable = active
+	_attributes.Event = {
+		Activated = function()
+			if active then
+				local _result = onActivated
+				if _result ~= nil then
+					_result()
+				end
+			end
+		end,
+	}
+	local _attributes_1 = table.clone(styles.padding)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = table.clone(styles.stroke)
+	setmetatable(_attributes_3, nil)
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_3))
+end
+local function ToggleButtonGroup(props)
+	local _binding = props
+	local value = _binding.value
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useToggleButtonStyles({})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ToggleButtonGroup"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.group 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.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(choice, index)
+		return React.createElement(ToggleButton, {
+			key = `{choice.label}-{index}`,
+			label = choice.label,
+			selected = choice.value == value,
+			disabled = disabled == true or choice.disabled == true,
+			onActivated = function()
+				if choice.value ~= value then
+					onChange(choice.value)
+				end
+			end,
+			className = {
+				LayoutOrder = index,
+			},
+		})
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = ToggleButton
+return {
+	ToggleButtonGroup = ToggleButtonGroup,
+	default = default,
+}

package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts

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

package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau

@@ -0,0 +1,58 @@
+-- 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 useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _param)
+	local selected = _param.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.new(0, 0, 0, theme.spacing.calc(4)),
+			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Active = not disabled,
+			Selectable = not disabled,
+			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = if selected then theme.palette.primary.main else theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Transparency = if disabled then 0.5 else 0,
+		},
+		group = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+	})
+end)
+local default = useToggleButtonStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as ToggleButton, ToggleButtonGroup } from "./components/ToggleButton";
+export { ToggleButtonProps, ToggleButtonGroupProps } from "./components/ToggleButton";

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

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

package/out/ui/packages/treeView/components/TreeView.luau

@@ -38,9 +38,9 @@ local function TreeView(props)
 	local _binding_2 = useTheme()
 	local theme = _binding_2.theme
 	local step = theme.padding.calc(4)
-	local chevronWidth = theme.spacing.calc(1)
-	local iconWidth = theme.spacing.calc(1) + theme.padding.calc(2)
-	local itemHeight = theme.spacing.calc(1) + theme.padding.calc(4)
+	local chevronWidth = theme.spacing.calc(1.5)
+	local iconWidth = theme.spacing.calc(2) + theme.padding.calc(1)
+	local itemHeight = theme.spacing.calc(3)
 	local listRef = useRef()
 	local clickedPath, setClickedPath = useState()
 	local clickedLeaf, setClickedLeaf = useState()

package/out/ui/packages/treeView/components/TreeView.styles.luau

@@ -14,7 +14,7 @@ local useTreeViewStyles = componentStyles("TreeView", function(theme)
 			ZIndex = 300,
 		},
 		header = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
 			Position = UDim2.new(0.5, 0, 0, 0),
 			AnchorPoint = Vector2.new(0.5, 0),
 			TextXAlignment = Enum.TextXAlignment.Left,
@@ -24,8 +24,8 @@ local useTreeViewStyles = componentStyles("TreeView", function(theme)
 			ZIndex = 5300,
 		},
 		list = {
-			Size = UDim2.new(1, 0, 1, -(theme.spacing.calc(1) + theme.padding.calc(2))),
-			Position = UDim2.new(0.5, 0, 0, theme.spacing.calc(1) + theme.padding.calc(2)),
+			Size = UDim2.new(1, 0, 1, -(theme.spacing.calc(3) + theme.padding.calc(2))),
+			Position = UDim2.new(0.5, 0, 0, theme.spacing.calc(3) + theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(0.5, 0),
 			BackgroundTransparency = 1,
 			ScrollBarThickness = theme.spacing.calc(0.5),

package/out/ui/packages/typography/components/Typography.styles.luau

@@ -13,9 +13,6 @@ local useTypographyStyles = componentStyles("Typography", function(theme, _param
 		variant = "body"
 	end
 	local family = _param.family
-	if family == nil then
-		family = "default"
-	end
 	local align = _param.align
 	if align == nil then
 		align = "left"
@@ -28,6 +25,8 @@ local useTypographyStyles = componentStyles("Typography", function(theme, _param
 	if lineClamp == nil then
 		lineClamp = false
 	end
+	local spec = theme.typography.variants[variant or "body"]
+	local resolvedFamily = family or spec.family
 	local DEFAULT_COLOR = theme.palette.text.primary
 	local COLOR_TO_PALETTE_MAP = {
 		initial = DEFAULT_COLOR,
@@ -83,8 +82,8 @@ local useTypographyStyles = componentStyles("Typography", function(theme, _param
 	return createStyles({
 		root = makeRootStyles(),
 		variantToken = {
-			TextSize = variant and theme.typography.fontSizes[variant],
-			Font = family and theme.typography.fontFamilies[family],
+			TextSize = spec.size,
+			Font = theme.typography.fontFamilies[resolvedFamily],
 		},
 	})
 end)

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

@@ -0,0 +1,6 @@
+export interface EmptyListHintProps {
+    text: string;
+    height?: number;
+}
+declare function EmptyListHint(props: EmptyListHintProps): JSX.Element;
+export default EmptyListHint;

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

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+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 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 _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _object = {}
+	local _left = "height"
+	local _condition = height
+	if _condition == nil then
+		_condition = theme.spacing.calc(4)
+	end
+	_object[_left] = _condition
+	local styles = useEmptyListHintStyles(_object)
+	local _attributes = {
+		key = "EmptyListHint",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	_attributes.Text = text
+	return React.createElement("textlabel", _attributes)
+end
+local default = EmptyListHint
+return {
+	default = default,
+}

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

@@ -0,0 +1,5 @@
+export interface EmptyListHintStyleProps {
+    height: number;
+}
+declare const useEmptyListHintStyles: (props: EmptyListHintStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
+export default useEmptyListHintStyles;

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

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+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 useEmptyListHintStyles = componentStyles("EmptyListHint", function(theme, _param)
+	local height = _param.height
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, height),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextYAlignment = Enum.TextYAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+			ZIndex = 20002,
+		},
+	})
+end)
+local default = useEmptyListHintStyles
+return {
+	default = default,
+}

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

@@ -1,2 +1,4 @@
 export { default as VirtualList } from "./components/VirtualList";
 export { VirtualListProps, VirtualListHandle, VirtualListItemState, VirtualListAlign, } from "./components/VirtualList";
+export { default as EmptyListHint } from "./components/EmptyListHint";
+export { EmptyListHintProps } from "./components/EmptyListHint";

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

@@ -2,4 +2,5 @@
 local TS = _G[script]
 local exports = {}
 exports.VirtualList = TS.import(script, script, "components", "VirtualList").default
+exports.EmptyListHint = TS.import(script, script, "components", "EmptyListHint").default
 return exports

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.0",
+	"version": "0.2.0-alpha.10",
 	"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/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/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/slider.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/container.check.mjs && node --experimental-strip-types scripts/divider.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/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/theme/styles/utilities/interaction.d.ts

@@ -1,13 +0,0 @@
-export interface InteractionSlots<T extends object = object> {
-    hover?: T;
-    pressed?: T;
-    focused?: T;
-    disabled?: T;
-}
-export interface InteractionState {
-    hover?: boolean;
-    pressed?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-}
-export declare function interactionStyle<T extends object>(base: T, slots: InteractionSlots<T>, state: InteractionState): T;