@rbxts/uiblox 0.2.0-alpha.19 → 0.2.0-alpha.2

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

@@ -9,19 +9,12 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 	if size == nil then
 		size = "medium"
 	end
-	local color = _param.color
-	if color == nil then
-		color = "primary"
-	end
 	local disabled = _param.disabled
-	local extended = _param.extended
 	local diameter = fabPixels(size)
-	local tone = if color == "accent" then theme.palette.accent else theme.palette.primary
 	return createStyles({
 		root = {
-			Size = if extended == true then UDim2.new(0, 0, 0, diameter) else UDim2.fromOffset(diameter, diameter),
-			AutomaticSize = if extended == true then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
-			BackgroundColor3 = tone.main,
+			Size = UDim2.fromOffset(diameter, diameter),
+			BackgroundColor3 = theme.palette.primary.main,
 			BackgroundTransparency = if disabled then 0.5 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -31,36 +24,13 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 		corner = {
 			CornerRadius = UDim.new(1, 0),
 		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
-			PaddingRight = UDim.new(0, theme.padding.calc(2.5)),
-		},
-		row = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			VerticalAlignment = Enum.VerticalAlignment.Center,
-			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-		},
 		icon = {
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Fit,
-			ImageColor3 = tone.on,
+			ImageColor3 = theme.palette.primary.on,
 			ImageTransparency = if disabled then 0.5 else 0,
-			LayoutOrder = 1,
-		},
-		label = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.on,
-			TextTransparency = if disabled then 0.5 else 0,
-			LayoutOrder = 2,
 		},
 	})
 end)

package/out/ui/packages/fab/components/fabSize.d.ts

@@ -1,4 +1,3 @@
 export type FabSize = "small" | "medium" | "large";
 export declare function fabPixels(size?: FabSize): 40 | 64 | 56;
 export declare function fabIconPixels(size?: FabSize): 18 | 24 | 28;
-export declare function fabExtended(label?: string): boolean;

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

@@ -23,11 +23,7 @@ local function fabIconPixels(size)
 	end
 	return 24
 end
-local function fabExtended(label)
-	return label ~= nil and label ~= ""
-end
 return {
 	fabPixels = fabPixels,
 	fabIconPixels = fabIconPixels,
-	fabExtended = fabExtended,
 }

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

@@ -1,3 +1,3 @@
 export { default as Fab } from "./components/Fab";
 export { FabProps } from "./components/Fab";
-export { FabSize, fabPixels, fabIconPixels, fabExtended } from "./components/fabSize";
+export { FabSize, fabPixels, fabIconPixels } from "./components/fabSize";

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

@@ -5,5 +5,4 @@ exports.Fab = TS.import(script, script, "components", "Fab").default
 local _fabSize = TS.import(script, script, "components", "fabSize")
 exports.fabPixels = _fabSize.fabPixels
 exports.fabIconPixels = _fabSize.fabIconPixels
-exports.fabExtended = _fabSize.fabExtended
 return exports

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -4,7 +4,6 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
-local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local iconSpinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").iconSpinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
@@ -19,7 +18,7 @@ local function IconButton(props)
 	if loading == nil then
 		loading = false
 	end
-	local reducedProp = _binding.reducedMotion
+	local reducedMotion = _binding.reducedMotion
 	local onClick = _binding.onClick
 	local className = _binding.className
 	local sx = _binding.sx
@@ -27,8 +26,6 @@ local function IconButton(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
-	local corner = _binding_1.corner
-	local reducedMotion = useReducedMotion(reducedProp)
 	local active = canActivate(disabled, loading)
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
@@ -89,9 +86,7 @@ local function IconButton(props)
 			return setFocused(false)
 		end,
 	}
-	local _attributes_1 = table.clone(corner)
-	setmetatable(_attributes_1, nil)
-	return React.createElement("imagebutton", _attributes, React.createElement("uicorner", _attributes_1), loading and (React.createElement(CircularProgress, {
+	return React.createElement("imagebutton", _attributes, loading and (React.createElement(CircularProgress, {
 		size = iconSpinnerPixels(props.size),
 		thickness = 2,
 		color = tint,

package/out/ui/packages/iconButton/components/IconButton.styles.luau

@@ -39,9 +39,6 @@ local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
 			ScaleType = Enum.ScaleType.Fit,
 			ZIndex = 12000,
 		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
 	})
 end)
 local default = useIconButtonStyles

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

@@ -3,10 +3,8 @@ export * from "./skeleton/index";
 export * from "./divider/index";
 export * from "./errorBoundary/index";
 export * from "./icon/index";
-export * from "./imageList/index";
 export * from "./iconButton/index";
 export * from "./input/index";
-export * from "./formText/index";
 export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
@@ -32,7 +30,6 @@ export * from "./cframeEditor/index";
 export * from "./enumPicker/index";
 export * from "./popup/index";
 export * from "./modal/index";
-export * from "./backdrop/index";
 export * from "./dialog/index";
 export * from "./paper/index";
 export * from "./card/index";
@@ -51,13 +48,9 @@ export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";
 export * from "./fab/index";
-export * from "./speedDial/index";
 export * from "./appBar/index";
 export * from "./bottomNavigation/index";
 export * from "./alert/index";
-export * from "./toggleButton/index";
-export * from "./link/index";
-export * from "./rating/index";
 export * from "./listItem/index";
 export * from "./menu/index";
 export * from "./motion/index";

package/out/ui/packages/init.luau

@@ -16,18 +16,12 @@ end
 for _k, _v in TS.import(script, script, "icon") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "imageList") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "iconButton") or {} do
 	exports[_k] = _v
 end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "formText") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "layout") or {} do
 	exports[_k] = _v
 end
@@ -103,9 +97,6 @@ end
 for _k, _v in TS.import(script, script, "modal") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "backdrop") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "dialog") or {} do
 	exports[_k] = _v
 end
@@ -160,9 +151,6 @@ end
 for _k, _v in TS.import(script, script, "fab") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "speedDial") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "appBar") or {} do
 	exports[_k] = _v
 end
@@ -172,15 +160,6 @@ end
 for _k, _v in TS.import(script, script, "alert") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "toggleButton") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "link") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "rating") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "listItem") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/input/components/Input.luau

@@ -46,7 +46,7 @@ local function Input(props)
 	end
 	local rounded = _binding.rounded
 	if rounded == nil then
-		rounded = true
+		rounded = false
 	end
 	local size = _binding.size
 	local reducedMotion = _binding.reducedMotion

package/out/ui/packages/layout/components/Grid.d.ts

@@ -5,7 +5,7 @@ export interface GridProps {
     fillDirection?: Enum.FillDirection;
     fillDirectionMaxCells?: number;
     sortOrder?: Enum.SortOrder;
-    startCorner?: Enum.StartCorner;
+    startCorner: Enum.StartCorner;
     horizontalAlignment?: Enum.HorizontalAlignment;
     verticalAlignment?: Enum.VerticalAlignment;
 }

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

@@ -4,13 +4,3 @@ 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 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,8 +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.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

@@ -3,7 +3,6 @@ export interface ListItemProps {
     secondary?: string;
     selected?: boolean;
     disabled?: boolean;
-    dense?: boolean;
     onActivated?: () => void;
 }
 declare function ListItem(props: ListItemProps): JSX.Element;

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

@@ -14,15 +14,10 @@ local function ListItem(props)
 	if disabled == nil then
 		disabled = false
 	end
-	local dense = _binding.dense
-	if dense == nil then
-		dense = false
-	end
 	local onActivated = _binding.onActivated
 	local styles = useListItemStyles({
 		selected = selected,
 		disabled = disabled,
-		dense = dense,
 	})
 	local _attributes = {
 		key = "ListItem",

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,
 		},

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

@@ -1,8 +1,6 @@
 import { CustomizedProps } from "../../../../theme/index";
 export interface LoadingStrokeProps {
     animating?: boolean;
-    color?: Color3;
-    thickness?: number;
 }
 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,4 +1,3 @@
-import React from "@rbxts/react";
 export interface MenuItem {
     id: string;
     text: string;
@@ -10,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: MenuProps): JSX.Element | undefined;
 export default Menu;

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

@@ -3,10 +3,8 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 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
@@ -14,17 +12,10 @@ 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 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 = {
 		key = "Surface",
 	}
@@ -34,56 +25,34 @@ local function Menu(props)
 	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 = empty
-		if _condition == nil then
-			local _attributes_4 = {}
-			local _condition_1 = emptyText
-			if _condition_1 == nil then
-				_condition_1 = "No options"
-			end
-			_attributes_4.text = _condition_1
-			_attributes_4.height = row
-			_condition = React.createElement(EmptyListHint, _attributes_4)
-		end
-		_result = _condition
-	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 = _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("frame", _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

@@ -5,5 +5,5 @@ export interface ModalProps {
     onClose: () => void;
     children?: React.ReactNode;
 }
-declare function Modal(props: ModalProps): JSX.Element;
+declare function Modal(props: ModalProps): JSX.Element | undefined;
 export default Modal;