@rbxts-ui/components 2.0.0 → 2.1.0

package/dist/DropdownButton.luau

@@ -0,0 +1,111 @@
+-- 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 Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").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 = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	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,
+		theme = theme,
+	})
+	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,
+		theme = theme,
+	}, _exp, _exp_1, _exp_2, React.createElement(Text, _attributes_1))
+end
+return {
+	DropdownButton = DropdownButton,
+}

package/dist/DropdownOptionButton.d.ts

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

package/dist/DropdownOptionButton.luau

@@ -0,0 +1,70 @@
+-- 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 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 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 = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	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)),
+		theme = theme,
+	}, _exp, _result)
+end
+return {
+	DropdownOptionButton = DropdownOptionButton,
+}

package/dist/FormRow.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface FormRowProps {
+    label: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    theme?: Theme;
+}
+export declare function FormRow({ label, children, disabled, theme }: FormRowProps): JSX.Element;
+export type { FormRowProps };
+//# sourceMappingURL=FormRow.d.ts.map

package/dist/FormRow.luau

@@ -0,0 +1,39 @@
+-- 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", "rem").dist).useRem
+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 defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local INPUT_HEIGHT = 5
+local function FormRow(_param)
+	local label = _param.label
+	local children = _param.children
+	local disabled = _param.disabled
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local textSize = rem(3)
+	local labelWidth = rem(20)
+	return React.createElement(HStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+	}, React.createElement(Text, {
+		text = label,
+		textSize = textSize,
+		textScaled = true,
+		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		size = UDim2.new(0.3, 0, 0, rem(INPUT_HEIGHT)),
+		textXAlignment = "Left",
+	}, React.createElement("uisizeconstraint", {
+		MaxSize = Vector2.new(labelWidth, math.huge),
+	})), React.createElement(HStack, {
+		size = UDim2.new(0.7, 0, 0, rem(INPUT_HEIGHT)),
+		spacing = rem(2),
+	}, children))
+end
+return {
+	FormRow = FormRow,
+}

package/dist/IconRoundButton.d.ts

@@ -0,0 +1,23 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+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;
+    readonly theme?: Theme;
+}
+export declare function IconRoundButton({ onClick, emoji, label, primaryColor, enabled, order, circleSize, width, addShadow, emojiSize, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, theme, }: IconRoundButtonProps): JSX.Element;
+export type { IconRoundButtonProps };
+//# sourceMappingURL=IconRoundButton.d.ts.map

package/dist/IconRoundButton.luau

@@ -0,0 +1,149 @@
+-- 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", "rem").dist).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, "Padding").Padding
+local Transition = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).Transition
+local defaultTheme = TS.import(script, script.Parent, "theme").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 = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	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,
+		theme = theme,
+	}, 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/IconTileButton.d.ts

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

package/dist/IconTileButton.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 Image = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Image
+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 defaultTheme = TS.import(script, script.Parent, "theme").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 = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	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,
+		theme = theme,
+	}, 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/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/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", "rem").dist).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/Outline.d.ts

@@ -0,0 +1,16 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface OutlineProps extends React.PropsWithChildren {
+    readonly outlineTransparency?: number | React.Binding<number>;
+    readonly innerColor?: Color3 | React.Binding<Color3>;
+    readonly outerColor?: Color3 | React.Binding<Color3>;
+    readonly innerTransparency?: number | React.Binding<number>;
+    readonly outerTransparency?: number | React.Binding<number>;
+    readonly innerThickness?: number | React.Binding<number>;
+    readonly outerThickness?: number | React.Binding<number>;
+    readonly cornerRadius?: UDim | React.Binding<UDim>;
+    readonly theme?: Theme;
+}
+export declare function Outline({ outlineTransparency, innerColor, outerColor, innerTransparency, outerTransparency, innerThickness, outerThickness, cornerRadius, children, theme, }: OutlineProps): JSX.Element;
+export type { OutlineProps };
+//# sourceMappingURL=Outline.d.ts.map