@rbxts-ui/components 2.0.0 → 2.1.0

package/dist/Outline.luau

@@ -0,0 +1,102 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useMemo = _react.useMemo
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Group = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Group
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function ceilEven(n)
+	return math.ceil(n / 2) * 2
+end
+local function Outline(_param)
+	local outlineTransparency = _param.outlineTransparency
+	if outlineTransparency == nil then
+		outlineTransparency = 0
+	end
+	local innerColor = _param.innerColor
+	local outerColor = _param.outerColor
+	local innerTransparency = _param.innerTransparency
+	if innerTransparency == nil then
+		innerTransparency = 0.9
+	end
+	local outerTransparency = _param.outerTransparency
+	if outerTransparency == nil then
+		outerTransparency = 0.85
+	end
+	local innerThickness = _param.innerThickness
+	local outerThickness = _param.outerThickness
+	local cornerRadius = _param.cornerRadius
+	local children = _param.children
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local defaultInnerColor = innerColor or theme.palette.white
+	local defaultOuterColor = outerColor or theme.palette.black
+	if innerThickness == nil then
+		innerThickness = rem(3, "pixel")
+	end
+	if outerThickness == nil then
+		outerThickness = rem(1.5, "pixel")
+	end
+	if cornerRadius == nil then
+		cornerRadius = UDim.new(0, rem(0.5))
+	end
+	local innerStyle = useMemo(function()
+		local size = composeBindings(innerThickness, function(thickness)
+			return UDim2.new(1, ceilEven(-2 * thickness), 1, ceilEven(-2 * thickness))
+		end)
+		local position = composeBindings(innerThickness, function(thickness)
+			return UDim2.new(0, thickness, 0, thickness)
+		end)
+		local radius = composeBindings(cornerRadius, innerThickness, function(radius, thickness)
+			local _radius = radius
+			local _uDim = UDim.new(0, thickness)
+			return _radius - _uDim
+		end)
+		local transparency = composeBindings(outlineTransparency, innerTransparency, function(a, b)
+			return math.clamp(blend(a, b), 0, 1)
+		end)
+		return {
+			size = size,
+			position = position,
+			radius = radius,
+			transparency = transparency,
+		}
+	end, { innerThickness, innerTransparency, cornerRadius, outlineTransparency, rem })
+	local outerStyle = useMemo(function()
+		local transparency = composeBindings(outlineTransparency, outerTransparency, function(a, b)
+			return math.clamp(blend(a, b), 0, 1)
+		end)
+		return {
+			transparency = transparency,
+		}
+	end, { outlineTransparency, outerTransparency })
+	return React.createElement(React.Fragment, nil, React.createElement(Group, {
+		size = innerStyle.size,
+		position = innerStyle.position,
+		name = "InnerOutline",
+	}, React.createElement("uicorner", {
+		CornerRadius = innerStyle.radius,
+	}), React.createElement("uistroke", {
+		Color = defaultInnerColor,
+		Transparency = innerStyle.transparency,
+		Thickness = innerThickness,
+	}, children)), React.createElement(Group, {
+		name = "OuterOutline",
+	}, React.createElement("uicorner", {
+		CornerRadius = cornerRadius,
+	}), React.createElement("uistroke", {
+		Color = defaultOuterColor,
+		Transparency = outerStyle.transparency,
+		Thickness = outerThickness,
+	}, children)))
+end
+return {
+	Outline = Outline,
+}

package/dist/PillText.d.ts

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

package/dist/PillText.luau

@@ -0,0 +1,69 @@
+-- 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", "rem").dist).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, "Outline").Outline
+local Padding = TS.import(script, script.Parent, "Padding").Padding
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").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 = _binding.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local textProps = Object.assign({}, omit(props, { "position", "name", "text", "textColor", "zIndex", "anchorPoint", "theme" }))
+	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,
+		theme = theme,
+	})
+	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/PrimaryButton.d.ts

@@ -0,0 +1,25 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface PrimaryButtonProps extends React.PropsWithChildren {
+    name?: 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 backgroundColor?: Color3 | React.Binding<Color3>;
+    readonly backgroundTransparency?: number | React.Binding<number>;
+    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 hasShadow?: boolean;
+    readonly hasOutline?: boolean;
+    readonly hasGlow?: boolean;
+    readonly hasBackground?: boolean;
+    readonly automaticSize?: Enum.AutomaticSize;
+    readonly theme?: Theme;
+}
+export declare function PrimaryButton({ name, onClick, onHover, size, position, anchorPoint, backgroundColor, backgroundTransparency, hasBackground, overlayGradient, overlayTransparency, overlayRotation, layoutOrder, hasShadow, hasOutline, hasGlow, automaticSize, children, theme, }: PrimaryButtonProps): JSX.Element;
+export type { PrimaryButtonProps };
+//# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/PrimaryButton.luau

@@ -0,0 +1,89 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Outline = TS.import(script, script.Parent, "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function PrimaryButton(_param)
+	local name = _param.name
+	local onClick = _param.onClick
+	local onHover = _param.onHover
+	local size = _param.size
+	local position = _param.position
+	local anchorPoint = _param.anchorPoint
+	local backgroundColor = _param.backgroundColor
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 0
+	end
+	local hasBackground = _param.hasBackground
+	if hasBackground == nil then
+		hasBackground = true
+	end
+	local overlayGradient = _param.overlayGradient
+	local overlayTransparency = _param.overlayTransparency
+	if overlayTransparency == nil then
+		overlayTransparency = 0
+	end
+	local overlayRotation = _param.overlayRotation
+	local layoutOrder = _param.layoutOrder
+	local hasShadow = _param.hasShadow
+	if hasShadow == nil then
+		hasShadow = true
+	end
+	local hasOutline = _param.hasOutline
+	if hasOutline == nil then
+		hasOutline = true
+	end
+	local hasGlow = _param.hasGlow
+	if hasGlow == nil then
+		hasGlow = true
+	end
+	local automaticSize = _param.automaticSize
+	local children = _param.children
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	return React.createElement(ReactiveButton, {
+		automaticSize = automaticSize,
+		name = name,
+		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,
+		position = position,
+		layoutOrder = layoutOrder,
+		theme = theme,
+	}, if hasBackground then (React.createElement(Frame, {
+		backgroundColor = backgroundColor,
+		cornerRadius = UDim.new(0, rem(1)),
+		size = UDim2.new(1, 0, 1, 0),
+		backgroundTransparency = backgroundTransparency,
+	}, React.createElement("uigradient", {
+		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
+		Rotation = 90,
+		Transparency = NumberSequence.new(0, 0.1),
+	}))) else nil, if hasOutline then React.createElement(Outline, {
+		cornerRadius = UDim.new(0, rem(1)),
+		innerTransparency = 0,
+		theme = theme,
+	}) else nil, children)
+end
+return {
+	PrimaryButton = PrimaryButton,
+}

package/dist/Radio.d.ts

@@ -0,0 +1,13 @@
+import { type Theme } from "./theme";
+interface RadioProps {
+    checked: boolean;
+    onChecked: (checked: boolean) => void;
+    text?: string;
+    variant?: "default" | "large" | "small";
+    position?: UDim2;
+    disabled?: boolean;
+    theme?: Theme;
+}
+export declare function Radio({ checked, onChecked, text, variant, position, disabled, theme }: RadioProps): JSX.Element;
+export type { RadioProps };
+//# sourceMappingURL=Radio.d.ts.map

package/dist/Radio.luau

@@ -0,0 +1,110 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 React = _react
+local useMemo = _react.useMemo
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Outline = TS.import(script, script.Parent, "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function Radio(_param)
+	local checked = _param.checked
+	local onChecked = _param.onChecked
+	local text = _param.text
+	local variant = _param.variant
+	if variant == nil then
+		variant = "default"
+	end
+	local position = _param.position
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
+	local buttonSize = UDim2.new(0, rem(checkboxSize), 0, rem(checkboxSize))
+	local textWidth, textWidthMotion = useMotion({
+		label = 0,
+		value = 0,
+	})
+	local size = useMemo(function()
+		return textWidth:map(function(_param_1)
+			local label = _param_1.label
+			local value = _param_1.value
+			local content = math.max(label, value)
+			local width = checkboxSize
+			return UDim2.new(0, rem(width) + content, 0, rem(checkboxSize))
+		end)
+	end, { rem })
+	local cornerRadius = UDim.new(1, 0)
+	local mainColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	local textColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	return React.createElement(ReactiveButton, {
+		backgroundTransparency = 1,
+		size = size,
+		position = position,
+		onClick = function()
+			return not disabled and onChecked(not checked)
+		end,
+		onHover = function(hovered)
+			return hoverMotion:spring(if hovered then 1 else 0)
+		end,
+		theme = theme,
+	}, React.createElement("uilistlayout", {
+		FillDirection = "Horizontal",
+		VerticalAlignment = "Center",
+		Padding = UDim.new(0, 8),
+	}), React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = buttonSize,
+	}, React.createElement(Frame, {
+		backgroundColor = theme.palette.white,
+		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),
+	})), React.createElement(Outline, {
+		outerColor = mainColor,
+		innerColor = mainColor,
+		cornerRadius = cornerRadius,
+		innerTransparency = 0,
+		outerTransparency = 1,
+		innerThickness = 2,
+		theme = theme,
+	}), if checked then (React.createElement(Frame, {
+		backgroundColor = theme.palette.blue,
+		backgroundTransparency = 0,
+		size = UDim2.new(0.7, 0, 0.7, 0),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+	}, React.createElement("uicorner", {
+		CornerRadius = cornerRadius,
+	}))) else nil), if text ~= "" and text then (React.createElement(Text, {
+		text = text,
+		size = UDim2.new(0, rem(2), 0, rem(2)),
+		textColor = textColor,
+		textXAlignment = "Left",
+		change = {
+			TextBounds = function(rbx)
+				textWidthMotion:spring({
+					value = rbx.TextBounds.X,
+				})
+			end,
+		},
+	})) else nil)
+end
+return {
+	Radio = Radio,
+}

package/dist/RadioRow.d.ts

@@ -0,0 +1,10 @@
+import { type Theme } from "./theme";
+export interface RadioRowProps {
+    label: string;
+    checked: boolean;
+    onChecked: () => void;
+    disabled?: boolean;
+    theme?: Theme;
+}
+export declare function RadioRow({ label, checked, onChecked, disabled, theme, }: RadioRowProps): JSX.Element;
+//# sourceMappingURL=RadioRow.d.ts.map

package/dist/RadioRow.luau

@@ -0,0 +1,50 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Button = TS.import(script, script.Parent, "Button").Button
+local Radio = TS.import(script, script.Parent, "Radio").Radio
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function RadioRow(_param)
+	local label = _param.label
+	local checked = _param.checked
+	local onChecked = _param.onChecked
+	local disabled = _param.disabled
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local textSize = rem(3)
+	return React.createElement(HStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		spacing = rem(2),
+	}, React.createElement(Radio, {
+		checked = checked,
+		variant = "large",
+		onChecked = onChecked,
+		disabled = disabled,
+		theme = theme,
+	}), React.createElement(Button, {
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(4)),
+		onClick = onChecked,
+	}, React.createElement(Text, {
+		text = label,
+		textSize = textSize,
+		textScaled = true,
+		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		size = UDim2.new(0.8, 0, 0, rem(4)),
+		textXAlignment = "Left",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))), React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))
+end
+return {
+	RadioRow = RadioRow,
+}

package/dist/ReactiveButton.d.ts

@@ -0,0 +1,34 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface ReactiveButtonProps extends React.PropsWithChildren {
+    name?: string;
+    onClick?: () => void;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onHover?: (hovered: boolean) => void;
+    onPress?: (pressed: boolean) => void;
+    enabled?: boolean;
+    size?: UDim2 | React.Binding<UDim2>;
+    position?: UDim2 | React.Binding<UDim2>;
+    anchorPoint?: Vector2 | React.Binding<Vector2>;
+    backgroundColor?: Color3 | React.Binding<Color3>;
+    backgroundTransparency?: number | React.Binding<number>;
+    cornerRadius?: UDim | React.Binding<UDim>;
+    layoutOrder?: number | React.Binding<number>;
+    animatePosition?: boolean;
+    animatePositionStrength?: number;
+    animatePositionDirection?: Vector2;
+    animateSize?: boolean;
+    animateSizeStrength?: number;
+    zIndex?: number | React.Binding<number>;
+    event?: React.InstanceEvent<TextButton>;
+    change?: React.InstanceChangeEvent<TextButton>;
+    fill?: boolean;
+    automaticSize?: Enum.AutomaticSize;
+    theme?: Theme;
+}
+export declare function ReactiveButton({ name, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onHover, onPress, enabled, size, position, anchorPoint, backgroundColor, backgroundTransparency, cornerRadius, layoutOrder, zIndex, animatePosition, animatePositionStrength, animatePositionDirection, animateSize, animateSizeStrength, event, change, children, fill, automaticSize, theme, }: ReactiveButtonProps): JSX.Element;
+export type { ReactiveButtonProps };
+//# sourceMappingURL=ReactiveButton.d.ts.map

package/dist/ReactiveButton.luau

@@ -0,0 +1,168 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Button = TS.import(script, script.Parent, "Button").Button
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useButtonAnimation = TS.import(script, script.Parent, "use-button-animation").useButtonAnimation
+local useButtonState = TS.import(script, script.Parent, "use-button-state").useButtonState
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+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 theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local sizeAnimation, sizeMotion = useMotion(0)
+	local press, hover, buttonEvents = useButtonState(enabled)
+	local animation = useButtonAnimation(press, hover, theme)
+	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,
+}