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

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

@@ -4,33 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local _gridProps = TS.import(script, script.Parent, "gridProps")
-local gridCornerKey = _gridProps.gridCornerKey
-local gridMaxCells = _gridProps.gridMaxCells
-local function cornerEnum(corner)
-	if corner == nil then
-		return nil
-	end
-	local _corner = corner
-	if not (type(_corner) == "string") then
-		return corner
-	end
-	local key = gridCornerKey(corner)
-	if key == "top-right" then
-		return Enum.StartCorner.TopRight
-	end
-	if key == "bottom-left" then
-		return Enum.StartCorner.BottomLeft
-	end
-	if key == "bottom-right" then
-		return Enum.StartCorner.BottomRight
-	end
-	return Enum.StartCorner.TopLeft
-end
-local useGridStyles = componentStyles("Grid", function(theme, props)
-	local cells = gridMaxCells(props.columns, props.maxColumns, props.fillDirectionMaxCells)
-	local pad = if props.gap ~= nil then UDim2.fromOffset(theme.spacing.calc(props.gap), theme.spacing.calc(props.gap)) else props.cellPadding
+local useGridStyles = componentStyles("Grid", function(_, props)
 	return createStyles({
 		baseGrid = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -39,12 +13,12 @@ local useGridStyles = componentStyles("Grid", function(theme, props)
 			BorderSizePixel = 0,
 		},
 		baseLayout = {
-			CellPadding = pad,
+			CellPadding = props.cellPadding,
 			CellSize = props.cellSize,
 			FillDirection = props.fillDirection,
-			FillDirectionMaxCells = cells,
+			FillDirectionMaxCells = props.fillDirectionMaxCells,
 			SortOrder = props.sortOrder,
-			StartCorner = cornerEnum(props.startCorner),
+			StartCorner = props.startCorner,
 			HorizontalAlignment = props.horizontalAlignment,
 			VerticalAlignment = props.verticalAlignment,
 		},
@@ -60,9 +34,6 @@ local function Grid(props)
 	if cellSize == nil then
 		cellSize = UDim2.fromOffset(100, 100)
 	end
-	local gap = _binding.gap
-	local columns = _binding.columns
-	local maxColumns = _binding.maxColumns
 	local fillDirection = _binding.fillDirection
 	if fillDirection == nil then
 		fillDirection = Enum.FillDirection.Horizontal
@@ -95,9 +66,6 @@ local function Grid(props)
 	local _binding_1 = useGridStyles({
 		cellPadding = cellPadding,
 		cellSize = cellSize,
-		gap = gap,
-		columns = columns,
-		maxColumns = maxColumns,
 		fillDirection = fillDirection,
 		fillDirectionMaxCells = fillDirectionMaxCells,
 		sortOrder = sortOrder,
@@ -113,17 +81,27 @@ local function Grid(props)
 		_condition = "Grid"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = baseGrid
-	_attributes.className = className
-	_attributes.sx = sx
+	_attributes.ref = ref
+	for _k, _v in baseGrid 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 = {
 		key = "GridLayout",
 	}
 	for _k, _v in baseLayout do
 		_attributes_1[_k] = _v
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("uigridlayout", _attributes_1), children)
+	return React.createElement("frame", _attributes, React.createElement("uigridlayout", _attributes_1), children)
 end
 local default = Grid
 return {

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

@@ -4,7 +4,6 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useListStyles = componentStyles("List", function(_, props)
 	return createStyles({
 		baseList = {
@@ -76,25 +75,33 @@ local function List(props)
 	})
 	local baseList = _binding_1.baseList
 	local baseLayout = _binding_1.baseLayout
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "List"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = baseList
-	_attributes.className = className
-	_attributes.sx = sx
+	_attributes.ref = ref
+	for _k, _v in baseList 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 = {
 		key = "ListLayout",
 	}
 	for _k, _v in baseLayout do
 		_attributes_1[_k] = _v
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", _attributes_1), children)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
 end
 local default = List
 return {

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

@@ -1,20 +1,6 @@
 export { default as Grid } from "./components/Grid";
 export { GridProps } from "./components/Grid";
-export { GridCorner } from "./components/gridProps";
 export * from "./components/Grid";
 export { default as List } from "./components/List";
 export { ListProps } from "./components/List";
 export * from "./components/List";
-export { default as Stack } from "./components/Stack";
-export { StackProps } from "./components/Stack";
-export { StackAlign, StackDirection, StackJustify } from "./components/stackAlign";
-export { default as FlexItem } from "./components/FlexItem";
-export { FlexItemProps } from "./components/FlexItem";
-export { FlexItemAlign, FlexItemModeName } from "./components/flexItemMode";
-export { default as Box } from "./components/Box";
-export { BoxProps } from "./components/Box";
-export { BoxPad } from "./components/boxPad";
-export { BoxBg } from "./components/Box.styles";
-export { default as Container } from "./components/Container";
-export { ContainerProps } from "./components/Container";
-export { ContainerMaxWidth, containerMaxPx } from "./components/containerWidth";

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

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

package/out/ui/packages/listItem/components/ListItem.d.ts

@@ -1,12 +1,9 @@
-import { CustomizedProps } from "../../../../theme/index";
 export interface ListItemProps {
     text: string;
     secondary?: string;
     selected?: boolean;
     disabled?: boolean;
-    dense?: boolean;
-    divider?: boolean;
     onActivated?: () => void;
 }
-declare function ListItem(props: CustomizedProps<TextButton, ListItemProps>): JSX.Element;
+declare function ListItem(props: ListItemProps): JSX.Element;
 export default ListItem;

package/out/ui/packages/listItem/components/ListItem.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 useListItemStyles = TS.import(script, script.Parent, "ListItem.styles").default
 local function ListItem(props)
 	local _binding = props
@@ -15,44 +14,17 @@ local function ListItem(props)
 	if disabled == nil then
 		disabled = false
 	end
-	local dense = _binding.dense
-	if dense == nil then
-		dense = false
-	end
-	local divider = _binding.divider
-	if divider == nil then
-		divider = false
-	end
 	local onActivated = _binding.onActivated
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
 	local styles = useListItemStyles({
 		selected = selected,
 		disabled = disabled,
-		dense = dense,
 	})
 	local _attributes = {
-		tag = "textbutton",
+		key = "ListItem",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ListItem"
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
 	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-		selected = selected,
-	}
-	_attributes.Text = ""
-	_attributes.Active = not disabled
-	_attributes.Selectable = not disabled
-	_attributes.AutoButtonColor = false
 	_attributes.Event = {
 		Activated = function()
 			if not disabled and onActivated ~= nil then
@@ -87,19 +59,7 @@ local function ListItem(props)
 	else
 		_result = nil
 	end
-	local _result_1
-	if divider == true then
-		local _attributes_4 = {
-			key = "Divider",
-		}
-		for _k, _v in styles.divider do
-			_attributes_4[_k] = _v
-		end
-		_result_1 = React.createElement("frame", _attributes_4)
-	else
-		_result_1 = nil
-	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result, _result_1)
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _result)
 end
 local default = ListItem
 return {

package/out/ui/packages/listItem/components/ListItem.styles.d.ts

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

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -12,11 +12,6 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
-	local dense = _param.dense
-	if dense == nil then
-		dense = false
-	end
-	local pad = theme.padding.calc(if dense == true then 0.5 else 1)
 	return createStyles({
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
@@ -30,10 +25,10 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			Selectable = not disabled,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, pad),
-			PaddingBottom = UDim.new(0, pad),
-			PaddingLeft = UDim.new(0, pad),
-			PaddingRight = UDim.new(0, pad),
+			PaddingTop = UDim.new(0, theme.padding.calc(1)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
 		},
 		list = {
 			FillDirection = Enum.FillDirection.Vertical,
@@ -46,7 +41,7 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body,
+			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
@@ -61,12 +56,6 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
-		divider = {
-			LayoutOrder = 3,
-			Size = UDim2.new(1, 0, 0, 1),
-			BackgroundColor3 = theme.palette.divider,
-			BorderSizePixel = 0,
-		},
 	})
 end)
 local default = useListItemStyles

package/out/ui/packages/loadingStroke/components/LoadingStroke.d.ts

@@ -1,12 +1,6 @@
 import { CustomizedProps } from "../../../../theme/index";
-import { LoadingStrokeStyle } from "./loadingStrokeSx";
 export interface LoadingStrokeProps {
     animating?: boolean;
-    color?: Color3;
-    thickness?: number;
 }
-declare function LoadingStroke(props: Omit<CustomizedProps<UIStroke, LoadingStrokeProps>, "sx" | "className"> & {
-    className?: LoadingStrokeStyle;
-    sx?: LoadingStrokeStyle;
-}): JSX.Element;
+declare function LoadingStroke(props: CustomizedProps<UIStroke, LoadingStrokeProps>): JSX.Element;
 export default LoadingStroke;

package/out/ui/packages/loadingStroke/components/LoadingStroke.luau

@@ -4,41 +4,37 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
-local loopProperty = TS.import(script, script.Parent.Parent.Parent, "motion").loopProperty
+local TweenService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TweenService
 local function LoadingStroke(props)
 	local _binding = props
 	local animating = _binding.animating
 	if animating == nil then
 		animating = false
 	end
-	local color = _binding.color
-	local thickness = _binding.thickness
-	if thickness == nil then
-		thickness = 2
-	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useTheme()
-	local theme = _binding_1.theme
 	local gradientRef = useRef()
-	local stroke = color or theme.palette.primary.on
 	useEffect(function()
-		local gradient = gradientRef.current
-		if not gradient then
-			return nil
-		end
-		if animating then
-			gradient.Rotation = 0
-			return loopProperty(gradient, {
-				Rotation = 360,
-			}, 1.2)
+		if gradientRef.current then
+			if animating then
+				local tween = TweenService:Create(gradientRef.current, TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, false), {
+					Rotation = 360,
+				})
+				tween:Play()
+				return function()
+					return tween:Destroy()
+				end
+			else
+				gradientRef.current.Rotation = 0
+			end
 		end
-		gradient.Rotation = 0
 	end, { animating })
+	-- Decorative shimmer; not a semantic text/surface token.
+	local stroke = Color3.fromRGB(255, 255, 255)
+	local mid = Color3.fromRGB(235, 235, 235)
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -47,7 +43,7 @@ local function LoadingStroke(props)
 	_attributes.key = _condition
 	_attributes.ref = ref
 	_attributes.Color = stroke
-	_attributes.Thickness = thickness
+	_attributes.Thickness = 2
 	_attributes.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
 	if className then
 		for _k, _v in className do
@@ -61,9 +57,9 @@ local function LoadingStroke(props)
 	end
 	return React.createElement("uistroke", _attributes, React.createElement("uigradient", {
 		ref = gradientRef,
-		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.45, 0), NumberSequenceKeypoint.new(0.55, 0), NumberSequenceKeypoint.new(1, 1) }),
+		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 1) }),
 		Rotation = 0,
-		Color = ColorSequence.new(stroke),
+		Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, stroke), ColorSequenceKeypoint.new(0.5, mid), ColorSequenceKeypoint.new(1, stroke) }),
 	}), children)
 end
 local default = LoadingStroke

package/out/ui/packages/menu/components/Menu.d.ts

@@ -1,5 +1,3 @@
-import React from "@rbxts/react";
-import { CustomizedProps } from "../../../../theme/index";
 export interface MenuItem {
     id: string;
     text: string;
@@ -11,10 +9,6 @@ export interface MenuProps {
     items: MenuItem[];
     onSelect: (id: string) => void;
     onClose: () => void;
-    emptyText?: string;
-    empty?: React.Element;
-    dense?: boolean;
-    selected?: string;
 }
-declare function Menu(props: CustomizedProps<Frame, MenuProps>): JSX.Element | undefined;
+declare function Menu(props: MenuProps): JSX.Element | undefined;
 export default Menu;

package/out/ui/packages/menu/components/Menu.luau

@@ -1,13 +1,10 @@
 -- 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 ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
-local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
 local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
 local ROW = 28
-local ROW_DENSE = 22
 local function Menu(props)
 	local _binding = props
 	local anchor = _binding.anchor
@@ -15,86 +12,47 @@ local function Menu(props)
 	local items = _binding.items
 	local onSelect = _binding.onSelect
 	local onClose = _binding.onClose
-	local emptyText = _binding.emptyText
-	local empty = _binding.empty
-	local dense = _binding.dense
-	local selected = _binding.selected
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
 	local styles = useMenuStyles()
 	if not open then
 		return nil
 	end
-	local vacant = #items == 0
-	local row = if dense == true then ROW_DENSE else ROW
-	local height = if vacant then row else #items * row
 	local _attributes = {
-		tag = "frame",
+		key = "Surface",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Surface"
+	for _k, _v in styles.surface do
+		_attributes[_k] = _v
 	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.surface
-	_attributes.className = className
-	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.corner)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.stroke)
+	local _attributes_2 = table.clone(styles.list)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uistroke", _attributes_2)
-	local _attributes_3 = table.clone(styles.list)
-	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
-	local _result
-	if vacant then
-		local _condition_1 = empty
-		if _condition_1 == nil then
-			local _attributes_4 = {}
-			local _condition_2 = emptyText
-			if _condition_2 == nil then
-				_condition_2 = "No options"
-			end
-			_attributes_4.text = _condition_2
-			_attributes_4.height = row
-			_condition_1 = React.createElement(EmptyListHint, _attributes_4)
-		end
-		_result = _condition_1
-	else
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue = table.create(#items)
-		local _callback = function(item)
-			return React.createElement(ListItem, {
-				key = item.id,
-				text = item.text,
-				disabled = item.disabled,
-				dense = dense,
-				selected = item.id == selected,
-				onActivated = function()
-					if item.disabled == true then
-						return nil
-					end
-					onSelect(item.id)
-					onClose()
-				end,
-			})
-		end
-		for _k, _v in items do
-			_newValue[_k] = _callback(_v, _k - 1, items)
-		end
-		-- ▲ ReadonlyArray.map ▲
-		_result = (React.createElement(React.Fragment, nil, _newValue))
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return React.createElement(ListItem, {
+			key = item.id,
+			text = item.text,
+			disabled = item.disabled,
+			onActivated = function()
+				if item.disabled == true then
+					return nil
+				end
+				onSelect(item.id)
+				onClose()
+			end,
+		})
 	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
 	return React.createElement(Popup, {
 		anchor = anchor,
-		preferredHeight = height,
+		preferredHeight = #items * ROW,
 		onDismiss = onClose,
-	}, React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _result))
+	}, React.createElement("frame", _attributes, _exp, _exp_1, _newValue))
 end
 local default = Menu
 return {

package/out/ui/packages/menu/components/Menu.styles.luau

@@ -8,16 +8,12 @@ local useMenuStyles = componentStyles("Menu", function(theme)
 		surface = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundColor3 = theme.palette.surface.elevated,
+			BackgroundColor3 = theme.palette.surface.paper,
 			BorderSizePixel = 0,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
-		stroke = {
-			Color = theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
 		list = {
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,

package/out/ui/packages/modal/components/Modal.d.ts

@@ -1,10 +1,9 @@
 import React from "@rbxts/react";
-import { CustomizedProps } from "../../../../theme/index";
 export interface ModalProps {
     host?: Instance;
     open: boolean;
     onClose: () => void;
     children?: React.ReactNode;
 }
-declare function Modal(props: CustomizedProps<Frame, ModalProps>): JSX.Element;
+declare function Modal(props: ModalProps): JSX.Element | undefined;
 export default Modal;