@rbxts-ui/components 2.0.0 → 3.0.0

package/dist/buttons/DropdownButton.luau

@@ -0,0 +1,106 @@
+-- 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", "@rbxts-ui/rem")).useRem
+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 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, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function DropdownButton(_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 isDisabled = _param.isDisabled
+	local size = _param.size
+	local padding = _param.padding
+	local radius = _param.radius
+	local theme = defaultTheme
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local textColor = theme.palette.crust
+	local backgroundColor = theme.palette.white
+	local _condition = radius
+	if _condition == nil then
+		_condition = 1
+	end
+	local cornerRadius = UDim.new(_condition, 0)
+	local _exp = React.createElement(Frame, {
+		backgroundColor = backgroundColor,
+		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,
+		innerColor = theme.palette.crust,
+		innerTransparency = 0,
+		outerColor = theme.palette.white,
+		outerTransparency = 0,
+		outerThickness = 1,
+	})
+	local _attributes = {
+		key = "mainText",
+		size = UDim2.new(1, 0, 1, 0),
+		text = text,
+		font = theme.fonts.inter.medium,
+		textSize = rem(3.5),
+		textColor = textColor,
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+		layoutOrder = 2,
+	}
+	local _condition_1 = padding
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.padding = _condition_1
+	_attributes.rem = rem
+	local _exp_2 = React.createElement(Text, _attributes)
+	local _attributes_1 = {
+		key = "arrow",
+		size = UDim2.new(1, 0, 1, 0),
+		text = "▼",
+		font = theme.fonts.inter.medium,
+		textSize = rem(3.5),
+		textColor = textColor,
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+		layoutOrder = 2,
+	}
+	local _condition_2 = padding
+	if _condition_2 == nil then
+		_condition_2 = 1
+	end
+	_attributes_1.padding = _condition_2
+	_attributes_1.position = UDim2.new(0.5, -rem(3), 0, 0)
+	_attributes_1.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,
+	}, _exp, _exp_1, _exp_2, React.createElement(Text, _attributes_1))
+end
+return {
+	DropdownButton = DropdownButton,
+}

package/dist/buttons/DropdownOptionButton.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+interface DropdownOptionButtonProps extends React.PropsWithChildren {
+    readonly text: string;
+    readonly onClick?: () => void;
+    readonly onHover?: (hovered: boolean) => void;
+    readonly size?: UDim2;
+    readonly padding?: number;
+}
+export declare function DropdownOptionButton({ text, onClick, onHover, size, padding, children, }: DropdownOptionButtonProps): JSX.Element;
+export type { DropdownOptionButtonProps };
+//# sourceMappingURL=DropdownOptionButton.d.ts.map

package/dist/buttons/DropdownOptionButton.luau

@@ -0,0 +1,66 @@
+-- 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", "@rbxts-ui/rem")).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+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, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function DropdownOptionButton(_param)
+	local text = _param.text
+	local onClick = _param.onClick
+	local onHover = _param.onHover
+	local size = _param.size
+	local padding = _param.padding
+	local children = _param.children
+	local theme = defaultTheme
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local textColor = theme.palette.crust
+	local _exp = React.createElement(Frame, {
+		backgroundColor = theme.palette.overlay0,
+		backgroundTransparency = lerpBinding(hover, 1, 0.8),
+		size = UDim2.new(1, 0, 1, 0),
+	})
+	local _result
+	if children then
+		_result = children
+	else
+		local _attributes = {
+			key = "mainText",
+			size = UDim2.new(1, 0, 1, 0),
+			text = text,
+			font = theme.fonts.inter.medium,
+			textSize = rem(3.5),
+			textColor = textColor,
+			textXAlignment = "Center",
+			textYAlignment = "Center",
+			layoutOrder = 2,
+		}
+		local _condition = padding
+		if _condition == nil then
+			_condition = 1
+		end
+		_attributes.padding = _condition
+		_attributes.rem = rem
+		_result = (React.createElement(Text, _attributes))
+	end
+	return React.createElement(ReactiveButton, {
+		onClick = onClick,
+		onHover = function(hovered)
+			hoverMotion:spring(if hovered then 1 else 0)
+			local _result_1 = onHover
+			if _result_1 ~= nil then
+				_result_1(hovered)
+			end
+		end,
+		backgroundTransparency = 1,
+		size = size or UDim2.new(0, rem(10), 0, rem(4)),
+	}, _exp, _result)
+end
+return {
+	DropdownOptionButton = DropdownOptionButton,
+}

package/dist/buttons/IconRoundButton.d.ts

@@ -0,0 +1,21 @@
+import React from "@rbxts/react";
+interface IconRoundButtonProps {
+    readonly onClick?: () => void;
+    readonly emoji?: string;
+    readonly label?: string;
+    readonly primaryColor: Color3;
+    readonly enabled: boolean;
+    readonly order: number;
+    readonly circleSize?: number;
+    readonly addShadow?: boolean;
+    readonly width?: number;
+    readonly emojiSize?: number;
+    readonly tooltipText?: string;
+    readonly tooltipComponent?: React.ReactNode;
+    readonly position?: UDim2;
+    readonly onMouseDown?: () => void;
+    readonly onMouseUp?: () => void;
+}
+export declare function IconRoundButton({ onClick, emoji, label, primaryColor, enabled, order, circleSize, width, addShadow, emojiSize, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, }: IconRoundButtonProps): JSX.Element;
+export type { IconRoundButtonProps };
+//# sourceMappingURL=IconRoundButton.d.ts.map

package/dist/buttons/IconRoundButton.luau

@@ -0,0 +1,145 @@
+-- Compiled with roblox-ts v3.0.0
+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 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 Group = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Group
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local Transition = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).Transition
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local MARGIN_Y = 0
+local PADDING_LEFT = 2
+local PADDING_RIGHT = 2
+local INTERNAL_PADDING = 1
+local function IconRoundButton(_param)
+	local onClick = _param.onClick
+	local emoji = _param.emoji
+	local label = _param.label
+	local primaryColor = _param.primaryColor
+	local enabled = _param.enabled
+	local order = _param.order
+	local circleSize = _param.circleSize
+	if circleSize == nil then
+		circleSize = 6
+	end
+	local width = _param.width
+	if width == nil then
+		width = 0
+	end
+	local addShadow = _param.addShadow
+	if addShadow == nil then
+		addShadow = false
+	end
+	local emojiSize = _param.emojiSize
+	if emojiSize == nil then
+		emojiSize = 2.5
+	end
+	local tooltipText = _param.tooltipText
+	local tooltipComponent = _param.tooltipComponent
+	local position = _param.position
+	local onMouseDown = _param.onMouseDown
+	local onMouseUp = _param.onMouseUp
+	local theme = defaultTheme
+	local rem = useRem()
+	local CIRCLE_SIZE = circleSize
+	local EMOJI_SIZE = CIRCLE_SIZE / emojiSize
+	local isRound = emoji ~= nil
+	local HEIGHT = rem(CIRCLE_SIZE)
+	local WIDTH = if isRound then HEIGHT else HEIGHT + rem(width)
+	local transparency, transparencyMotion = useMotion(1)
+	useEffect(function()
+		transparencyMotion:spring(if enabled then 0 else 0.75, theme.springs.slow or {
+			tension = 250,
+			friction = 30,
+		})
+	end, { enabled })
+	local fullRound = UDim.new(1, 0)
+	local showTooltip, setShowTooltip = useState(false)
+	local _condition = tooltipText
+	if not (_condition ~= "" and _condition) then
+		_condition = tooltipComponent
+	end
+	local _condition_1 = _condition
+	if _condition_1 ~= "" and _condition_1 then
+		_condition_1 = showTooltip
+	end
+	local _result
+	if _condition_1 ~= "" and _condition_1 then
+		local _condition_2 = tooltipComponent
+		if _condition_2 == nil then
+			_condition_2 = nil
+		end
+		_result = _condition_2
+	else
+		_result = nil
+	end
+	return React.createElement(ReactiveButton, {
+		onClick = onClick,
+		backgroundTransparency = 1,
+		size = UDim2.new(0, WIDTH, 0, HEIGHT),
+		layoutOrder = order,
+		onMouseEnter = function()
+			return setShowTooltip(true)
+		end,
+		onMouseLeave = function()
+			return setShowTooltip(false)
+		end,
+		position = position,
+		onMouseDown = onMouseDown,
+		onMouseUp = onMouseUp,
+	}, React.createElement(Transition, {
+		groupTransparency = transparency,
+		size = UDim2.new(1, 0, 1, rem(2 * MARGIN_Y)),
+		position = UDim2.new(0, 0, 0, rem(-MARGIN_Y)),
+	}, _result, React.createElement(Padding, {
+		paddingY = rem(MARGIN_Y),
+	}), React.createElement(Frame, {
+		backgroundTransparency = 0,
+		backgroundColor = primaryColor,
+		cornerRadius = fullRound,
+		size = UDim2.new(1, 0, 1, 0),
+	}), React.createElement(HStack, {
+		spacing = rem(INTERNAL_PADDING),
+		clipsDescendants = false,
+	}, if emoji ~= "" and emoji then (React.createElement(Group, {
+		size = UDim2.new(0, rem(CIRCLE_SIZE), 0, rem(CIRCLE_SIZE)),
+	}, React.createElement(Frame, {
+		backgroundColor = theme.palette.white,
+		backgroundTransparency = 0.7,
+		cornerRadius = fullRound,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uistroke", {
+		Color = theme.palette.white,
+		Transparency = 0.7,
+		Thickness = 0.5,
+	})), React.createElement(Text, {
+		text = emoji,
+		textScaled = true,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		size = UDim2.new(0, rem(EMOJI_SIZE), 0, rem(EMOJI_SIZE)),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+	}))) else nil, if label ~= "" and label then (React.createElement(Text, {
+		text = label,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		size = UDim2.new(1, 0, 1, 0),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		font = theme.fonts.inter.bold,
+		textColor = theme.palette.text,
+		textSize = rem(1.5),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+		richText = true,
+	})) else nil)))
+end
+return {
+	IconRoundButton = IconRoundButton,
+}

package/dist/buttons/IconTileButton.d.ts

@@ -0,0 +1,12 @@
+interface IconTileButtonProps {
+    readonly icon?: string;
+    readonly emoji?: string;
+    readonly onClick: () => void;
+    readonly label?: string;
+    readonly selected?: boolean;
+    readonly size?: UDim2;
+    readonly enabled?: boolean;
+}
+export declare function IconTileButton({ icon, emoji, onClick, label, selected, size, enabled, }: IconTileButtonProps): JSX.Element;
+export type { IconTileButtonProps };
+//# sourceMappingURL=IconTileButton.d.ts.map

package/dist/buttons/IconTileButton.luau

@@ -0,0 +1,86 @@
+-- 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 Group = _primitives.Group
+local Image = _primitives.Image
+local Text = _primitives.Text
+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 lerpBinding = _pretty_react_hooks.lerpBinding
+local useMotion = _pretty_react_hooks.useMotion
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function IconTileButton(_param)
+	local icon = _param.icon
+	local emoji = _param.emoji
+	local onClick = _param.onClick
+	local label = _param.label
+	local selected = _param.selected
+	local size = _param.size
+	local enabled = _param.enabled
+	if enabled == nil then
+		enabled = true
+	end
+	local theme = defaultTheme
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local roundness = rem(1)
+	local bgColor = if selected then theme.palette.blue else theme.palette.white
+	local backgroundColor = lerpBinding(hover, bgColor, theme.palette.offwhite)
+	local side = 45
+	local tileSize = size or UDim2.new(0, side, 0, side)
+	local imageSize = 0.6
+	return React.createElement(ReactiveButton, {
+		onClick = onClick,
+		onHover = function(hovered)
+			return hoverMotion:spring(if hovered then 1 else 0)
+		end,
+		backgroundTransparency = 1,
+		size = tileSize,
+		enabled = enabled,
+	}, React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uiaspectratioconstraint", {
+		AspectRatio = 1,
+	}), React.createElement(Frame, {
+		backgroundColor = backgroundColor,
+		backgroundTransparency = 0,
+		cornerRadius = UDim.new(0, roundness),
+		size = UDim2.new(1, 0, 1, 0),
+	}), if icon ~= "" and icon then (React.createElement(Image, {
+		image = icon,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		size = UDim2.new(imageSize, 0, imageSize, 0),
+		position = UDim2.new(0.5, 0, if label ~= "" and label then 0.45 else 0.5, 0),
+		imageTransparency = if enabled then 0 else 0.7,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, roundness),
+	}))) else nil, if emoji ~= "" and emoji then (React.createElement(Text, {
+		text = emoji,
+		textSize = rem(3),
+		textScaled = true,
+		textColor = theme.palette.white,
+		size = UDim2.new(1, 0, 1, 0),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+		textTransparency = if enabled then 0 else 0.7,
+	})) else nil, if label ~= nil and label ~= "" then (React.createElement(Group, {
+		anchorPoint = Vector2.new(0.5, 1),
+		size = UDim2.new(1, 0, 0, rem(3)),
+		position = UDim2.new(0.5, 0, 1, rem(2.7)),
+	}, React.createElement(Text, {
+		font = theme.fonts.inter.medium,
+		text = string.upper(label),
+		textSize = rem(1.5),
+		textColor = theme.palette.black,
+		textYAlignment = "Center",
+		textXAlignment = "Center",
+		size = UDim2.new(1, 0, 1, 0),
+	}))) else nil))
+end
+return {
+	IconTileButton = IconTileButton,
+}

package/dist/buttons/PrimaryButton.d.ts

@@ -0,0 +1,23 @@
+import React from "@rbxts/react";
+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;
+}
+export declare function PrimaryButton({ name, onClick, onHover, size, position, anchorPoint, backgroundColor, backgroundTransparency, hasBackground, overlayGradient, overlayTransparency, overlayRotation, layoutOrder, hasShadow, hasOutline, hasGlow, automaticSize, children, }: PrimaryButtonProps): JSX.Element;
+export type { PrimaryButtonProps };
+//# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/buttons/PrimaryButton.luau

@@ -0,0 +1,84 @@
+-- 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", "@rbxts-ui/rem")).useRem
+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 ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).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 = defaultTheme
+	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,
+	}, 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,
+	}) else nil, children)
+end
+return {
+	PrimaryButton = PrimaryButton,
+}

package/dist/buttons/ReactiveButton.d.ts

@@ -0,0 +1,32 @@
+import React from "@rbxts/react";
+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;
+}
+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, }: ReactiveButtonProps): JSX.Element;
+export type { ReactiveButtonProps };
+//# sourceMappingURL=ReactiveButton.d.ts.map