@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

package/out/ui/packages/brickColorPicker/components/brickColorFilter.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local function filterBrickNames(names, query)
+	if #query == 0 then
+		return names
+	end
+	local needle = string.lower(query)
+	local matched = {}
+	for _, name in names do
+		if (string.find(string.lower(name), needle, 1, true)) ~= nil then
+			table.insert(matched, name)
+		end
+	end
+	return matched
+end
+local function brickNameMatches(name, query)
+	if #query == 0 then
+		return true
+	end
+	local _exp = string.lower(name)
+	local _arg0 = string.lower(query)
+	return (string.find(_exp, _arg0, 1, true)) ~= nil
+end
+return {
+	filterBrickNames = filterBrickNames,
+	brickNameMatches = brickNameMatches,
+}

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

@@ -0,0 +1,3 @@
+export { default as BrickColorPicker } from "./components/BrickColorPicker";
+export { BrickColorPickerProps } from "./components/BrickColorPicker";
+export { filterBrickNames, brickNameMatches } from "./components/brickColorFilter";

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

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.BrickColorPicker = TS.import(script, script, "components", "BrickColorPicker").default
+local _brickColorFilter = TS.import(script, script, "components", "brickColorFilter")
+exports.filterBrickNames = _brickColorFilter.filterBrickNames
+exports.brickNameMatches = _brickColorFilter.brickNameMatches
+return exports

package/out/ui/packages/button/components/Button.d.ts

@@ -1,5 +1,6 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types/index";
+import { LoadingPosition } from "./buttonLook";
 export type DefaultButtonComponent = TextButton;
 export interface ButtonProps {
     text?: string;
@@ -9,6 +10,9 @@ export interface ButtonProps {
     variant?: ButtonVariant;
     disabled?: boolean;
     loading?: boolean;
+    loadingLabel?: string;
+    loadingPosition?: LoadingPosition;
+    reducedMotion?: boolean;
     rounded?: boolean;
     hoveringDisabled?: boolean;
     animating?: boolean;

package/out/ui/packages/button/components/Button.luau

@@ -2,9 +2,17 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local useEffect = _react.useEffect
 local useState = _react.useState
-local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local LoadingStroke = TS.import(script, script.Parent.Parent.Parent, "loadingStroke").LoadingStroke
+local canActivate = TS.import(script, script.Parent, "activation").canActivate
+local _buttonLook = TS.import(script, script.Parent, "buttonLook")
+local buttonFace = _buttonLook.buttonFace
+local spinnerPixels = _buttonLook.spinnerPixels
+local spinnerPlace = _buttonLook.spinnerPlace
+local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
 local function Button(props)
 	local _binding = props
 	local text = _binding.text
@@ -23,6 +31,12 @@ local function Button(props)
 	if loading == nil then
 		loading = false
 	end
+	local loadingLabel = _binding.loadingLabel
+	local loadingPosition = _binding.loadingPosition
+	if loadingPosition == nil then
+		loadingPosition = "center"
+	end
+	local reducedMotion = _binding.reducedMotion
 	local rounded = _binding.rounded
 	if rounded == nil then
 		rounded = false
@@ -44,6 +58,7 @@ local function Button(props)
 	local mouseEnter = _binding.mouseEnter
 	local mouseLeave = _binding.mouseLeave
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -52,7 +67,23 @@ local function Button(props)
 	local font = _binding_1.font
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
+	local _binding_2 = useTheme()
+	local theme = _binding_2.theme
 	local hovering, setHovering = useState(false)
+	local focused, setFocused = useState(false)
+	local active = canActivate(disabled, loading)
+	local pressed = disabled or (not hoveringDisabled and active and (hovering or focused))
+	local face = buttonFace(text, loading, loadingLabel)
+	local place = spinnerPlace(loadingPosition)
+	local branded = (props.color or "primary") == "primary"
+	local spinnerColor = if variant == "contained" then if branded then theme.palette.primary.on else theme.palette.text.inverse elseif branded then theme.palette.primary.main else theme.palette.text.primary
+	useEffect(function()
+		if active then
+			return nil
+		end
+		setHovering(false)
+		setFocused(false)
+	end, { active })
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -66,10 +97,27 @@ local function Button(props)
 	for _k, _v in font do
 		_attributes[_k] = _v
 	end
-	_attributes.Active = not disabled
-	_attributes.Text = text
+	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.Active = active
+	_attributes.AutoButtonColor = active
+	_attributes.Selectable = active
+	_attributes.Text = face.text
+	for _k, _v in (if face.hideText then {
+		TextTransparency = 1,
+	} else {}) do
+		_attributes[_k] = _v
+	end
 	local _result
-	if (not hoveringDisabled and hovering) or disabled then
+	if pressed then
 		_result = 0.75
 	else
 		local _result_1 = className
@@ -85,6 +133,9 @@ local function Button(props)
 	_attributes.BackgroundTransparency = _result
 	_attributes.Event = {
 		MouseEnter = function()
+			if not active then
+				return nil
+			end
 			setHovering(true)
 			if mouseEnter then
 				mouseEnter()
@@ -96,69 +147,71 @@ local function Button(props)
 				mouseLeave()
 			end
 		end,
+		SelectionGained = function()
+			if active then
+				setFocused(true)
+			end
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
 		MouseButton1Click = function()
-			if not disabled and not loading then
-				if onLeftClick then
-					onLeftClick()
-				end
+			if active and onLeftClick then
+				onLeftClick()
 			end
 		end,
 		MouseButton1Down = function()
-			if not disabled and not loading then
-				if onLeftDown then
-					onLeftDown()
-				end
+			if active and onLeftDown then
+				onLeftDown()
 			end
 		end,
 		MouseButton1Up = function()
-			if not disabled and not loading then
-				if onLeftUp then
-					onLeftUp()
-				end
+			if active and onLeftUp then
+				onLeftUp()
 			end
 		end,
 		MouseButton2Click = function()
-			if not disabled and not loading then
-				if onRightClick then
-					onRightClick()
-				end
+			if active and onRightClick then
+				onRightClick()
 			end
 		end,
 		MouseButton2Down = function()
-			if not disabled and not loading then
-				if onRightDown then
-					onRightDown()
-				end
+			if active and onRightDown then
+				onRightDown()
 			end
 		end,
 		MouseButton2Up = function()
-			if not disabled and not loading then
-				if onRightUp then
-					onRightUp()
-				end
+			if active and onRightUp then
+				onRightUp()
 			end
 		end,
 	}
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	local _condition_1 = variant == "outlined"
+	local _condition_1 = variant == "outlined" and not animating
 	if _condition_1 then
 		local _attributes_1 = table.clone(stroke)
 		setmetatable(_attributes_1, nil)
 		_condition_1 = React.createElement("uistroke", _attributes_1)
 	end
+	local _exp = animating and React.createElement(LoadingStroke, {
+		animating = animating,
+	})
 	local _condition_2 = rounded
 	if _condition_2 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
 		_condition_2 = React.createElement("uicorner", _attributes_1)
 	end
-	return React.createElement("textbutton", _attributes, _condition_1, _condition_2, children, React.createElement(LoadingStroke, {
-		animating = animating,
-	}))
+	return React.createElement("textbutton", _attributes, _condition_1, _exp, _condition_2, loading and (React.createElement(CircularProgress, {
+		size = spinnerPixels(props.size),
+		thickness = 2,
+		color = spinnerColor,
+		reducedMotion = reducedMotion,
+		className = {
+			AnchorPoint = Vector2.new(place.anchorX, 0.5),
+			Position = UDim2.new(place.xScale, place.xOffset, 0.5, 0),
+			ZIndex = 10001,
+		},
+	})), children)
 end
 local default = Button
 return {

package/out/ui/packages/button/components/Button.styles.luau

@@ -1,37 +1,22 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
-local makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local makeRootStyles = function(theme, _param)
 	local size = _param.size
+	if size == nil then
+		size = "small"
+	end
 	local color = _param.color
 	local fullWidth = _param.fullWidth
 	local variant = _param.variant
-	--[[
-		*
-			 * Default style override
-			 
-	]]
-	local defaultStyles = {}
-	repeat
-		if size == "small" then
-			defaultStyles.Size = UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(2))
-			break
-		end
-		if size == "medium" then
-			defaultStyles.Size = UDim2.new(0, theme.spacing.calc(12), 0, theme.spacing.calc(3))
-			break
-		end
-		if size == "large" then
-			defaultStyles.Size = UDim2.new(0, theme.spacing.calc(16), 0, theme.spacing.calc(4))
-			break
-		end
-		defaultStyles.Size = UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(2))
-		break
-	until true
+	local metrics = controlMetrics(theme.density, size)
+	local defaultStyles = {
+		Size = UDim2.new(0, metrics.buttonWidth, 0, metrics.buttonHeight),
+	}
 	if fullWidth then
-		-- Make full width minus padding
 		local _exp = -theme.padding.calc(4)
 		local _result = defaultStyles.Size
 		if _result ~= nil then
@@ -50,7 +35,6 @@ local makeRootStyles = function(theme, _param)
 			_condition_1 = 0
 		end
 		defaultStyles.Size = UDim2.new(1, _exp, _condition, _condition_1)
-		-- And center it horizontally
 		defaultStyles.AnchorPoint = Vector2.new(0.5, 0)
 		local _result_2 = defaultStyles.Position
 		if _result_2 ~= nil then
@@ -78,8 +62,9 @@ local makeRootStyles = function(theme, _param)
 		end
 		defaultStyles.Position = UDim2.new(0.5, _condition_2, _condition_3, _condition_4)
 	end
-	defaultStyles.BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
-	defaultStyles.TextColor3 = theme.palette.background.default
+	local brand = if color == "primary" then theme.palette.primary else nil
+	defaultStyles.BackgroundColor3 = if brand then brand.main else theme.palette.text.primary
+	defaultStyles.TextColor3 = if brand then brand.on else theme.palette.text.inverse
 	repeat
 		if variant == "contained" then
 			defaultStyles.BackgroundTransparency = 0
@@ -87,13 +72,13 @@ local makeRootStyles = function(theme, _param)
 			break
 		end
 		if variant == "outlined" then
-			defaultStyles.TextColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
+			defaultStyles.TextColor3 = if brand then brand.main else theme.palette.text.primary
 			defaultStyles.BackgroundTransparency = 1
 			defaultStyles.BorderSizePixel = theme.options.constants.borders.default
 			break
 		end
 		if variant == "text" then
-			defaultStyles.TextColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
+			defaultStyles.TextColor3 = if brand then brand.main else theme.palette.text.primary
 			defaultStyles.BackgroundTransparency = 1
 			defaultStyles.BorderSizePixel = 0
 			break
@@ -105,7 +90,7 @@ local makeRootStyles = function(theme, _param)
 	defaultStyles.ZIndex = 10000
 	return defaultStyles
 end
-local useButtonStyles = makeStyles(function(theme, _param)
+local useButtonStyles = componentStyles("Button", function(theme, _param)
 	local size = _param.size
 	if size == nil then
 		size = "small"
@@ -122,6 +107,7 @@ local useButtonStyles = makeStyles(function(theme, _param)
 	if variant == nil then
 		variant = "contained"
 	end
+	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = makeRootStyles(theme, {
 			size = size,
@@ -130,14 +116,14 @@ local useButtonStyles = makeStyles(function(theme, _param)
 			variant = variant,
 		}),
 		font = {
-			TextSize = theme.typography.fontSizes.button,
+			TextSize = metrics.font,
 			Font = theme.typography.fontFamilies.default,
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
+			Color = if color == "primary" then theme.palette.primary.main else theme.palette.text.primary,
 			Transparency = 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},

package/out/ui/packages/button/components/activation.d.ts

@@ -0,0 +1 @@
+export declare function canActivate(disabled?: boolean, loading?: boolean): boolean;

package/out/ui/packages/button/components/activation.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function canActivate(disabled, loading)
+	return disabled ~= true and loading ~= true
+end
+return {
+	canActivate = canActivate,
+}

package/out/ui/packages/button/components/buttonLook.d.ts

@@ -0,0 +1,12 @@
+export type LoadingPosition = "start" | "center" | "end";
+export declare function buttonFace(text: string, loading: boolean, loadingLabel?: string): {
+    text: string;
+    hideText: boolean;
+};
+export declare function spinnerPlace(position?: LoadingPosition): {
+    xScale: number;
+    xOffset: number;
+    anchorX: number;
+};
+export declare function spinnerPixels(size?: "small" | "medium" | "large"): 16 | 12 | 14;
+export declare function iconSpinnerPixels(size?: string): 16 | 8 | 12;

package/out/ui/packages/button/components/buttonLook.luau

@@ -0,0 +1,55 @@
+-- Compiled with roblox-ts v3.0.0
+local function buttonFace(text, loading, loadingLabel)
+	return {
+		text = if loading and loadingLabel ~= nil then loadingLabel else text,
+		hideText = loading and loadingLabel == nil,
+	}
+end
+local function spinnerPlace(position)
+	if position == nil then
+		position = "center"
+	end
+	if position == "start" then
+		return {
+			xScale = 0,
+			xOffset = 8,
+			anchorX = 0,
+		}
+	end
+	if position == "end" then
+		return {
+			xScale = 1,
+			xOffset = -8,
+			anchorX = 1,
+		}
+	end
+	return {
+		xScale = 0.5,
+		xOffset = 0,
+		anchorX = 0.5,
+	}
+end
+local function spinnerPixels(size)
+	if size == "large" then
+		return 16
+	end
+	if size == "medium" then
+		return 14
+	end
+	return 12
+end
+local function iconSpinnerPixels(size)
+	if size == "xxs" or size == "xs" then
+		return 8
+	end
+	if size == "lg" or size == "xl" then
+		return 16
+	end
+	return 12
+end
+return {
+	buttonFace = buttonFace,
+	spinnerPlace = spinnerPlace,
+	spinnerPixels = spinnerPixels,
+	iconSpinnerPixels = iconSpinnerPixels,
+}

package/out/ui/packages/button/types/ButtonSize.d.ts

@@ -1 +1 @@
-export type ButtonSize = "small" | "medium" | "large";
+export type { ControlSize as ButtonSize } from "../../../../theme/index";

package/out/ui/packages/card/components/Card.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { PaperElevation } from "../../paper/index";
+export interface CardProps {
+    title?: string;
+    subtitle?: string;
+    elevation?: PaperElevation;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare function Card(props: CardProps): JSX.Element;
+export default Card;

package/out/ui/packages/card/components/Card.luau

@@ -0,0 +1,74 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Paper = TS.import(script, script.Parent.Parent.Parent, "paper").Paper
+local useCardStyles = TS.import(script, script.Parent, "Card.styles").default
+local function Card(props)
+	local _binding = props
+	local title = _binding.title
+	local subtitle = _binding.subtitle
+	local elevation = _binding.elevation
+	if elevation == nil then
+		elevation = "flat"
+	end
+	local actions = _binding.actions
+	local children = _binding.children
+	local styles = useCardStyles()
+	local _attributes = {
+		key = "Column",
+	}
+	for _k, _v in styles.column do
+		_attributes[_k] = _v
+	end
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _condition = title ~= nil
+	if _condition then
+		local _attributes_2 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = title
+		_condition = (React.createElement("textlabel", _attributes_2))
+	end
+	local _condition_1 = subtitle ~= nil
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Subtitle",
+		}
+		for _k, _v in styles.subtitle do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = subtitle
+		_condition_1 = (React.createElement("textlabel", _attributes_2))
+	end
+	local _attributes_2 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_2[_k] = _v
+	end
+	local _exp_1 = React.createElement("frame", _attributes_2, children)
+	local _condition_2 = actions ~= nil
+	if _condition_2 then
+		local _attributes_3 = {
+			key = "Actions",
+		}
+		for _k, _v in styles.actions do
+			_attributes_3[_k] = _v
+		end
+		local _attributes_4 = table.clone(styles.actionList)
+		setmetatable(_attributes_4, nil)
+		_condition_2 = (React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), actions))
+	end
+	return React.createElement(Paper, {
+		elevation = elevation,
+	}, React.createElement("frame", _attributes, _exp, _condition, _condition_1, _exp_1, _condition_2))
+end
+local default = Card
+return {
+	default = default,
+}

package/out/ui/packages/card/components/Card.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useCardStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useCardStyles;

package/out/ui/packages/card/components/Card.styles.luau

@@ -0,0 +1,66 @@
+-- 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 useCardStyles = componentStyles("Card", function(theme)
+	return createStyles({
+		column = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromOffset(theme.padding.calc(32), 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		title = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.h6,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		subtitle = {
+			LayoutOrder = 2,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		body = {
+			LayoutOrder = 3,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		actions = {
+			LayoutOrder = 4,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		actionList = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Right,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+	})
+end)
+local default = useCardStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as Card } from "./components/Card";
+export { CardProps } from "./components/Card";

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

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

package/out/ui/packages/cframeEditor/components/CFrameEditor.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface CFrameEditorProps {
+    value: CFrame;
+    onChange: (value: CFrame) => void;
+    disabled?: boolean;
+}
+declare function CFrameEditor(props: CustomizedProps<Frame, CFrameEditorProps>): JSX.Element;
+export default CFrameEditor;