@rbxts-ui/components 2.0.0 → 3.0.0

package/dist/buttons/ReactiveButton.luau

@@ -0,0 +1,163 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local blend = _pretty_react_hooks.blend
+local composeBindings = _pretty_react_hooks.composeBindings
+local lerpBinding = _pretty_react_hooks.lerpBinding
+local useMotion = _pretty_react_hooks.useMotion
+local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Button = TS.import(script, script.Parent, "Button").Button
+local useButtonAnimation = TS.import(script, script.Parent.Parent, "hooks", "use-button-animation").useButtonAnimation
+local useButtonState = TS.import(script, script.Parent.Parent, "hooks", "use-button-state").useButtonState
+local function ReactiveButton(_param)
+	local name = _param.name
+	local onClick = _param.onClick
+	local onMouseDown = _param.onMouseDown
+	local onMouseUp = _param.onMouseUp
+	local onMouseEnter = _param.onMouseEnter
+	local onMouseLeave = _param.onMouseLeave
+	local onHover = _param.onHover
+	local onPress = _param.onPress
+	local enabled = _param.enabled
+	if enabled == nil then
+		enabled = true
+	end
+	local size = _param.size
+	local position = _param.position
+	local anchorPoint = _param.anchorPoint
+	local backgroundColor = _param.backgroundColor
+	if backgroundColor == nil then
+		backgroundColor = Color3.fromRGB(255, 255, 255)
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 0
+	end
+	local cornerRadius = _param.cornerRadius
+	local layoutOrder = _param.layoutOrder
+	local zIndex = _param.zIndex
+	local animatePosition = _param.animatePosition
+	if animatePosition == nil then
+		animatePosition = true
+	end
+	local animatePositionStrength = _param.animatePositionStrength
+	if animatePositionStrength == nil then
+		animatePositionStrength = 1
+	end
+	local animatePositionDirection = _param.animatePositionDirection
+	if animatePositionDirection == nil then
+		animatePositionDirection = Vector2.new(0, 1)
+	end
+	local animateSize = _param.animateSize
+	if animateSize == nil then
+		animateSize = true
+	end
+	local animateSizeStrength = _param.animateSizeStrength
+	if animateSizeStrength == nil then
+		animateSizeStrength = 1
+	end
+	local event = _param.event
+	local change = _param.change
+	local children = _param.children
+	local fill = _param.fill
+	if fill == nil then
+		fill = false
+	end
+	local automaticSize = _param.automaticSize
+	local rem = useRem()
+	local sizeAnimation, sizeMotion = useMotion(0)
+	local press, hover, buttonEvents = useButtonState(enabled)
+	local animation = useButtonAnimation(press, hover)
+	useUpdateEffect(function()
+		if press then
+			sizeMotion:spring(-0.1, {
+				tension = 300,
+			})
+		else
+			sizeMotion:spring(0, {
+				impulse = 0.01,
+				tension = 300,
+			})
+		end
+	end, { press })
+	useUpdateEffect(function()
+		local _result = onHover
+		if _result ~= nil then
+			_result(hover)
+		end
+	end, { hover })
+	useUpdateEffect(function()
+		local _result = onPress
+		if _result ~= nil then
+			_result(press)
+		end
+	end, { press })
+	return React.createElement(Button, {
+		name = name,
+		onClick = if enabled then onClick else nil,
+		active = enabled,
+		onMouseDown = function()
+			if not enabled then
+				return nil
+			end
+			buttonEvents.onMouseDown()
+			local _result = onMouseDown
+			if _result ~= nil then
+				_result()
+			end
+		end,
+		onMouseUp = function()
+			if not enabled then
+				return nil
+			end
+			buttonEvents.onMouseUp()
+			local _result = onMouseUp
+			if _result ~= nil then
+				_result()
+			end
+		end,
+		onMouseEnter = function()
+			buttonEvents.onMouseEnter()
+			local _result = onMouseEnter
+			if _result ~= nil then
+				_result()
+			end
+		end,
+		onMouseLeave = function()
+			buttonEvents.onMouseLeave()
+			local _result = onMouseLeave
+			if _result ~= nil then
+				_result()
+			end
+		end,
+		backgroundTransparency = 1,
+		size = size,
+		position = position,
+		anchorPoint = anchorPoint,
+		layoutOrder = layoutOrder,
+		zIndex = zIndex,
+		event = event,
+		change = change,
+		automaticSize = automaticSize,
+	}, if fill then React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}) else nil, React.createElement(Frame, {
+		automaticSize = automaticSize,
+		backgroundColor = composeBindings(animation.hoverOnly, animation.press, backgroundColor, function(hover, press, color)
+			return color:Lerp(Color3.new(1, 1, 1), hover * 0.15):Lerp(Color3.new(), press * 0.1)
+		end),
+		backgroundTransparency = composeBindings(animation.press, backgroundTransparency, function(press, transparency)
+			return blend(-press * 0.2, transparency)
+		end),
+		cornerRadius = cornerRadius,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		size = lerpBinding(if animateSize then sizeAnimation else 0, UDim2.new(1, 0, 1, 0), UDim2.new(1, rem(2 * animateSizeStrength), 1, rem(2 * animateSizeStrength))),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+	}, children))
+end
+return {
+	ReactiveButton = ReactiveButton,
+}

package/dist/buttons/TextButton.d.ts

@@ -0,0 +1,30 @@
+import React from "@rbxts/react";
+export declare enum TextButtonVariant {
+    Green = 0,
+    Red = 1,
+    Blue = 2,
+    Black = 3,
+    DarkGray = 4
+}
+interface TextButtonProps extends React.PropsWithChildren {
+    readonly text: string;
+    readonly onClick?: () => void;
+    readonly onHover?: (hovered: boolean) => void;
+    readonly size?: UDim2 | React.Binding<UDim2>;
+    readonly position?: UDim2 | React.Binding<UDim2>;
+    readonly anchorPoint?: Vector2 | React.Binding<Vector2>;
+    readonly overlayGradient?: ColorSequence | React.Binding<ColorSequence>;
+    readonly overlayTransparency?: number | React.Binding<number>;
+    readonly overlayRotation?: number | React.Binding<number>;
+    readonly layoutOrder?: number | React.Binding<number>;
+    readonly variant: TextButtonVariant;
+    readonly isDisabled?: boolean;
+    readonly hasShadow?: boolean;
+    readonly padding?: number;
+    readonly radius?: number;
+    readonly textSize?: number;
+    readonly textScaled?: boolean;
+}
+export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, }: TextButtonProps): JSX.Element;
+export type { TextButtonProps };
+//# sourceMappingURL=TextButton.d.ts.map

package/dist/buttons/TextButton.luau

@@ -0,0 +1,121 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local lerpBinding = _pretty_react_hooks.lerpBinding
+local useMotion = _pretty_react_hooks.useMotion
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local TextButtonVariant
+do
+	local _inverse = {}
+	TextButtonVariant = setmetatable({}, {
+		__index = _inverse,
+	})
+	TextButtonVariant.Green = 0
+	_inverse[0] = "Green"
+	TextButtonVariant.Red = 1
+	_inverse[1] = "Red"
+	TextButtonVariant.Blue = 2
+	_inverse[2] = "Blue"
+	TextButtonVariant.Black = 3
+	_inverse[3] = "Black"
+	TextButtonVariant.DarkGray = 4
+	_inverse[4] = "DarkGray"
+end
+local function TextButton(_param)
+	local text = _param.text
+	local onClick = _param.onClick
+	local onHover = _param.onHover
+	local position = _param.position
+	local anchorPoint = _param.anchorPoint
+	local layoutOrder = _param.layoutOrder
+	local variant = _param.variant
+	local isDisabled = _param.isDisabled
+	local hasShadow = _param.hasShadow
+	local size = _param.size
+	local padding = _param.padding
+	local radius = _param.radius
+	local children = _param.children
+	local textSize = _param.textSize
+	local textScaled = _param.textScaled
+	local theme = defaultTheme
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local colorVariant = {
+		[TextButtonVariant.Green] = theme.palette.green,
+		[TextButtonVariant.Red] = theme.palette.red,
+		[TextButtonVariant.Blue] = theme.palette.blue,
+		[TextButtonVariant.Black] = theme.palette.black,
+		[TextButtonVariant.DarkGray] = theme.palette.darkgray,
+	}
+	local color = colorVariant[variant]
+	local textColor = if variant == TextButtonVariant.Black then theme.palette.white else theme.palette.crust
+	local _condition = radius
+	if _condition == nil then
+		_condition = 1
+	end
+	local cornerRadius = UDim.new(_condition, 0)
+	local _exp = React.createElement(Frame, {
+		backgroundColor = theme.palette.offwhite,
+		backgroundTransparency = if isDisabled then 0.7 else 0,
+		cornerRadius = cornerRadius,
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uigradient", {
+		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
+		Rotation = 90,
+		Transparency = NumberSequence.new(0, 0.1),
+	}))
+	local _exp_1 = React.createElement(Outline, {
+		cornerRadius = cornerRadius,
+		innerTransparency = if isDisabled then 1 else 0,
+		innerColor = color,
+		innerThickness = 1,
+	})
+	local _attributes = {
+		key = "mainText",
+		size = UDim2.new(1, 0, 1, 0),
+		text = text,
+	}
+	local _condition_1 = textScaled
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	_attributes.textScaled = _condition_1
+	_attributes.textColor = textColor
+	_attributes.textXAlignment = "Center"
+	_attributes.textYAlignment = "Center"
+	_attributes.layoutOrder = 2
+	local _condition_2 = padding
+	if _condition_2 == nil then
+		_condition_2 = 1
+	end
+	_attributes.padding = _condition_2
+	_attributes.textSize = textSize
+	_attributes.rem = rem
+	return React.createElement(ReactiveButton, {
+		onClick = onClick,
+		onHover = function(hovered)
+			hoverMotion:spring(if hovered then 1 else 0)
+			local _result = onHover
+			if _result ~= nil then
+				_result(hovered)
+			end
+		end,
+		backgroundTransparency = 1,
+		anchorPoint = anchorPoint,
+		size = size or UDim2.new(0, rem(10), 0, rem(4)),
+		position = position,
+		layoutOrder = layoutOrder,
+		fill = true,
+	}, _exp, _exp_1, React.createElement(Text, _attributes), children)
+end
+return {
+	TextButton = TextButton,
+	TextButtonVariant = TextButtonVariant,
+}

package/dist/{Checkmark.luau → display/Checkmark.luau}

@@ -3,7 +3,7 @@ local TS = _G[script]
 local lerpBinding = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).lerpBinding
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
-local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local function Checkmark(_param)
 	local checked = _param.checked
 	local color = _param.color

package/dist/display/Legend.d.ts

@@ -0,0 +1,11 @@
+interface LegendProps {
+    items: Array<{
+        color: Color3;
+        label: string;
+    }>;
+    position?: UDim2;
+    size?: UDim2;
+}
+export declare function Legend({ items, position, size }: LegendProps): JSX.Element;
+export type { LegendProps };
+//# sourceMappingURL=Legend.d.ts.map

package/dist/display/Legend.luau

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
+local HStack = _layout.HStack
+local VStack = _layout.VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local function Legend(_param)
+	local items = _param.items
+	local position = _param.position
+	local size = _param.size
+	local rem = useRem()
+	local defaultPosition = UDim2.new(0, rem(2), 0, rem(2))
+	local defaultSize = UDim2.new(0, rem(20), 0, 1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item, index)
+		return React.createElement(HStack, {
+			key = `legend-{index}`,
+			spacing = rem(1),
+			verticalAlignment = Enum.VerticalAlignment.Center,
+			size = UDim2.new(1, 0, 0, rem(4)),
+		}, React.createElement(Frame, {
+			size = UDim2.new(0, rem(2), 0, rem(2)),
+			backgroundColor = item.color,
+			backgroundTransparency = 0,
+			cornerRadius = UDim.new(0, rem(0.5)),
+		}), React.createElement(Text, {
+			text = item.label,
+			textSize = rem(2),
+			textColor = Color3.fromRGB(255, 255, 255),
+			automaticSize = Enum.AutomaticSize.X,
+		}))
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(VStack, {
+		position = position or defaultPosition,
+		size = size or defaultSize,
+		spacing = rem(0.5),
+		cornerRadius = UDim.new(0, rem(2)),
+		backgroundColor = Color3.fromRGB(0, 0, 0),
+		backgroundTransparency = 0.3,
+		padding = rem(1),
+		automaticSize = Enum.AutomaticSize.Y,
+	}, _newValue)
+end
+return {
+	Legend = Legend,
+}

package/dist/display/PillText.d.ts

@@ -0,0 +1,6 @@
+import { type TextProps } from "@rbxts-ui/primitives";
+interface PillTextProps extends TextProps {
+}
+export declare function PillText(props: PillTextProps): JSX.Element;
+export type { PillTextProps };
+//# sourceMappingURL=PillText.d.ts.map

package/dist/display/PillText.luau

@@ -0,0 +1,65 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local omit = TS.import(script, TS.getModule(script, "@rbxts-ui", "utils").dist).omit
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local WIDTH = 3
+local HEIGHT = 2
+local function PillText(props)
+	local _binding = props
+	local text = _binding.text
+	local textColor = _binding.textColor
+	local position = _binding.position
+	local name = _binding.name
+	local zIndex = _binding.zIndex
+	local anchorPoint = _binding.anchorPoint
+	local theme = defaultTheme
+	local textProps = Object.assign({}, omit(props, { "position", "name", "text", "textColor", "zIndex", "anchorPoint" }))
+	local rem = useRem()
+	local cornerRadius = UDim.new(0, rem(3))
+	local _exp = React.createElement(Frame, {
+		backgroundColor = theme.palette.black,
+		backgroundTransparency = 0.3,
+		cornerRadius = cornerRadius,
+		size = UDim2.new(1, 0, 1, 0),
+		zIndex = 1,
+	})
+	local _exp_1 = React.createElement(Outline, {
+		cornerRadius = cornerRadius,
+		innerTransparency = 1,
+		innerColor = theme.palette.black,
+		outerTransparency = 0,
+		outerColor = theme.palette.black,
+	})
+	local _attributes = {
+		text = `{text}`,
+		textSize = rem(1),
+		textColor = textColor or theme.palette.text,
+		richText = true,
+		automaticSize = Enum.AutomaticSize.XY,
+		rem = rem,
+	}
+	for _k, _v in textProps do
+		_attributes[_k] = _v
+	end
+	return React.createElement(Frame, {
+		size = UDim2.new(0, WIDTH, 0, HEIGHT),
+		position = position,
+		name = name,
+		zIndex = zIndex,
+		automaticSize = Enum.AutomaticSize.XY,
+		anchorPoint = anchorPoint,
+	}, _exp, _exp_1, React.createElement(Text, _attributes, React.createElement(Padding, {
+		paddingY = rem(0.7),
+		paddingX = rem(1.5),
+	})))
+end
+return {
+	PillText = PillText,
+}

package/dist/display/TimeAgo.d.ts

@@ -0,0 +1,8 @@
+import { type TextProps } from "@rbxts-ui/primitives";
+interface TimeAgoProps extends Omit<TextProps, "text"> {
+    timestamp: number;
+    refreshInterval?: number;
+}
+export declare function TimeAgo(props: TimeAgoProps): JSX.Element;
+export type { TimeAgoProps };
+//# sourceMappingURL=TimeAgo.d.ts.map

package/dist/display/TimeAgo.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
+local useInterval = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useInterval
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local omit = TS.import(script, TS.getModule(script, "@rbxts-ui", "utils").dist).omit
+local PillText = TS.import(script, script.Parent, "PillText").PillText
+local function getTimeAgo(timestamp)
+	local now = os.time()
+	local seconds = now - timestamp / 1000
+	if seconds < 60 then
+		return `{math.floor(seconds)}s ago`
+	end
+	local minutes = math.floor(seconds / 60)
+	if minutes < 60 then
+		return `{minutes}m ago`
+	end
+	local hours = math.floor(minutes / 60)
+	if hours < 24 then
+		return `{hours}h ago`
+	end
+	local days = math.floor(hours / 24)
+	return `{days}d ago`
+end
+local function TimeAgo(props)
+	local timeAgo, setTimeAgo = useState(function()
+		return getTimeAgo(props.timestamp)
+	end)
+	local _exp = function()
+		setTimeAgo(getTimeAgo(props.timestamp))
+	end
+	local _condition = props.refreshInterval
+	if _condition == nil then
+		_condition = 1
+	end
+	useInterval(_exp, _condition)
+	local textProps = Object.assign({}, omit(props, { "timestamp", "refreshInterval" }))
+	local _attributes = table.clone(Object.assign({
+		text = timeAgo,
+	}, textProps))
+	setmetatable(_attributes, nil)
+	return React.createElement(PillText, _attributes)
+end
+return {
+	TimeAgo = TimeAgo,
+}

package/dist/error-handler/ErrorHandler.d.ts

@@ -0,0 +1,3 @@
+import React from "@rbxts/react";
+export declare function ErrorHandler({ children }: React.PropsWithChildren): JSX.Element;
+//# sourceMappingURL=ErrorHandler.d.ts.map

package/dist/error-handler/ErrorHandler.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ErrorBoundary = TS.import(script, script.Parent.Parent, "utils", "ErrorBoundary").ErrorBoundary
+local ErrorPage = TS.import(script, script.Parent, "ErrorPage").ErrorPage
+local function ErrorHandler(_param)
+	local children = _param.children
+	return React.createElement(ErrorBoundary, {
+		fallback = function(message)
+			return React.createElement(ErrorPage, {
+				message = message,
+			})
+		end,
+	}, children)
+end
+return {
+	ErrorHandler = ErrorHandler,
+}

package/dist/error-handler/ErrorPage.d.ts

@@ -0,0 +1,6 @@
+interface ErrorPageProps {
+    readonly message: unknown;
+}
+export declare function ErrorPage({ message }: ErrorPageProps): JSX.Element;
+export {};
+//# sourceMappingURL=ErrorPage.d.ts.map