@rbxts-ui/components 2.0.0 → 3.0.0

package/dist/form/validation.luau

@@ -0,0 +1,80 @@
+-- Compiled with roblox-ts v3.0.0
+local function validateAngle(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local angle = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if angle < 0 then
+		return "Angle must be greater than 0"
+	end
+	if angle > 180 then
+		return "Angle must be less than 180"
+	end
+	return nil
+end
+local function validatePosNumber(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if number < 0 then
+		return "Number must be greater than 0"
+	end
+	return nil
+end
+local function validateNumber(val)
+	local valParsed = tonumber(val)
+	if not (valParsed ~= 0 and valParsed == valParsed and valParsed) and valParsed ~= 0 then
+		return "Please enter a valid number"
+	end
+	return nil
+end
+--[[
+	*
+	 * Validates that a number is within specified bounds
+	 * @param val - String value to validate
+	 * @param min - Minimum allowed value
+	 * @param max - Maximum allowed value
+	 * @param customErrorMsg - Optional custom error message for bounds error
+	 * @returns Error message or undefined if valid
+	 
+]]
+local function validateNumberBounds(val, min, max, customErrorMsg)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	local _condition_1 = not (_value ~= 0 and _value == _value and _value)
+	if _condition_1 then
+		_condition_1 = number ~= 0
+	end
+	if _condition_1 then
+		return "Please enter a valid number"
+	end
+	if number < min or number > max then
+		local _condition_2 = customErrorMsg
+		if _condition_2 == nil then
+			_condition_2 = `Number must be between {min} and {max}`
+		end
+		return _condition_2
+	end
+	return nil
+end
+return {
+	validateAngle = validateAngle,
+	validatePosNumber = validatePosNumber,
+	validateNumber = validateNumber,
+	validateNumberBounds = validateNumberBounds,
+}

package/dist/hooks/use-button-animation.d.ts

@@ -0,0 +1,36 @@
+import React from "@rbxts/react";
+export interface ButtonAnimation {
+    /**
+     * An underdamped spring. `-1` is fully hovered, `0` is neutral, and `1` is
+     * fully pressed. Values outside of this range are possible.
+     */
+    readonly position: React.Binding<number>;
+    /**
+     * A critically damped spring that is `1` when the button is pressed.
+     */
+    readonly press: React.Binding<number>;
+    /**
+     * A critically damped spring that is `1` when the button is hovered.
+     */
+    readonly hover: React.Binding<number>;
+    /**
+     * Same as `hover`, but `pressed` must be `false`.
+     */
+    readonly hoverOnly: React.Binding<number>;
+}
+/**
+ * Returns a `ButtonAnimation` object that can be used to animate a button.
+ * The values provided by the object are:
+ *
+ * - `position`: An underdamped spring. `-1` is fully hovered, `0` is neutral,
+ *  and `1` is fully pressed. Values outside of this range are possible.
+ * - `press`: A critically damped spring that is `1` when the button is pressed.
+ * - `hover`: A critically damped spring that is `1` when the button is hovered.
+ * - `hoverExclusive`: Same as `hover`, but `pressed` must also be `false`.
+ *
+ * @param pressedState Whether the button is pressed.
+ * @param hoveredState Whether the button is hovered.
+ * @returns A `ButtonAnimation` object.
+ */
+export declare function useButtonAnimation(pressedState: boolean, hoveredState: boolean): ButtonAnimation;
+//# sourceMappingURL=use-button-animation.d.ts.map

package/dist/hooks/use-button-animation.luau

@@ -0,0 +1,80 @@
+-- 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 useMotion = _pretty_react_hooks.useMotion
+local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
+local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+--[[
+	*
+	 * Returns a `ButtonAnimation` object that can be used to animate a button.
+	 * The values provided by the object are:
+	 *
+	 * - `position`: An underdamped spring. `-1` is fully hovered, `0` is neutral,
+	 *  and `1` is fully pressed. Values outside of this range are possible.
+	 * - `press`: A critically damped spring that is `1` when the button is pressed.
+	 * - `hover`: A critically damped spring that is `1` when the button is hovered.
+	 * - `hoverExclusive`: Same as `hover`, but `pressed` must also be `false`.
+	 *
+	 * @param pressedState Whether the button is pressed.
+	 * @param hoveredState Whether the button is hovered.
+	 * @returns A `ButtonAnimation` object.
+	 
+]]
+local function useButtonAnimation(pressedState, hoveredState)
+	local theme = defaultTheme
+	local press, pressMotion = useMotion(0)
+	local hover, hoverMotion = useMotion(0)
+	local hoverExclusive, hoverExclusiveMotion = useMotion(0)
+	local position, positionMotion = useMotion(0)
+	useUpdateEffect(function()
+		pressMotion:spring(if pressedState then 1 else 0, theme.springs.responsive)
+		hoverExclusiveMotion:spring(if hoveredState and not pressedState then 1 else 0, theme.springs.responsive)
+	end, { pressedState, hoveredState })
+	useUpdateEffect(function()
+		hoverMotion:spring(if hoveredState then 1 else 0, theme.springs.responsive)
+	end, { hoveredState })
+	useUpdateEffect(function()
+		if pressedState then
+			-- hovered -> pressed
+			positionMotion:spring(1, theme.springs.responsive)
+		elseif hoveredState then
+			-- pressed -> hovered
+			local _exp = -1
+			local _object = table.clone(theme.springs.bubbly)
+			setmetatable(_object, nil)
+			_object.impulse = -0.1
+			positionMotion:spring(_exp, _object)
+		else
+			-- pressed -> unhovered, but 'hover' was not true
+			local _object = table.clone(theme.springs.bubbly)
+			setmetatable(_object, nil)
+			_object.impulse = -0.07
+			positionMotion:spring(0, _object)
+		end
+	end, { pressedState })
+	useUpdateEffect(function()
+		if hoveredState then
+			-- unhovered -> hovered
+			positionMotion:spring(-1, theme.springs.responsive)
+		else
+			-- hovered -> unhovered
+			positionMotion:spring(0, theme.springs.responsive)
+		end
+	end, { hoveredState })
+	return useMemo(function()
+		return {
+			press = press,
+			hover = hover:map(function(t)
+				return math.clamp(t, 0, 1)
+			end),
+			hoverOnly = hoverExclusive:map(function(t)
+				return math.clamp(t, 0, 1)
+			end),
+			position = position,
+		}
+	end, {})
+end
+return {
+	useButtonAnimation = useButtonAnimation,
+}

package/dist/hooks/use-button-state.d.ts

@@ -0,0 +1,13 @@
+export interface ButtonEvents {
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}
+/**
+ * Returns the current state of a button based on the events returned.
+ * @param enabled Whether the button is enabled or not.
+ * @returns The press state, hover state, and a `ButtonEvents` object.
+ */
+export declare function useButtonState(enabled?: boolean): LuaTuple<[press: boolean, hover: boolean, events: ButtonEvents]>;
+//# sourceMappingURL=use-button-state.d.ts.map

package/dist/hooks/use-button-state.luau

@@ -0,0 +1,81 @@
+-- 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 useEventListener = _pretty_react_hooks.useEventListener
+local useLatest = _pretty_react_hooks.useLatest
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useMemo = _react.useMemo
+local useState = _react.useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local setTimeout = TS.import(script, TS.getModule(script, "@rbxts", "set-timeout").out).setTimeout
+local useInputDevice = TS.import(script, script.Parent, "use-input-device").useInputDevice
+--[[
+	*
+	 * Returns the current state of a button based on the events returned.
+	 * @param enabled Whether the button is enabled or not.
+	 * @returns The press state, hover state, and a `ButtonEvents` object.
+	 
+]]
+local function useButtonState(enabled)
+	if enabled == nil then
+		enabled = true
+	end
+	local _binding, setState = useState({
+		press = false,
+		hover = false,
+	})
+	local press = _binding.press
+	local hover = _binding.hover
+	local on = useLatest(enabled)
+	local touch = useLatest(useInputDevice() == "touch")
+	local events = useMemo(function()
+		return {
+			onMouseDown = function()
+				return setState(function(state)
+					local _object = table.clone(state)
+					setmetatable(_object, nil)
+					_object.press = on.current
+					return _object
+				end)
+			end,
+			onMouseUp = function()
+				return setState(function(state)
+					local _object = table.clone(state)
+					setmetatable(_object, nil)
+					_object.press = false
+					return _object
+				end)
+			end,
+			onMouseEnter = function()
+				return setState(function(state)
+					local _object = table.clone(state)
+					setmetatable(_object, nil)
+					_object.hover = on.current and not touch.current
+					return _object
+				end)
+			end,
+			onMouseLeave = function()
+				return setState({
+					press = false,
+					hover = false,
+				})
+			end,
+		}
+	end, {})
+	-- Touch devices might not fire mouse leave events, so assume that all
+	-- releases are a mouse leave.
+	useEventListener(UserInputService.InputEnded, function(input)
+		if input.UserInputType == Enum.UserInputType.Touch then
+			setTimeout(function()
+				setState({
+					press = false,
+					hover = false,
+				})
+			end, 0)
+		end
+	end)
+	return press, hover, events
+end
+return {
+	useButtonState = useButtonState,
+}

package/dist/hooks/use-input-device.d.ts

@@ -0,0 +1,7 @@
+export type InputDevice = "keyboard" | "gamepad" | "touch";
+/**
+ * Returns the current input device being used by the player.
+ * @returns An InputDevice string.
+ */
+export declare function useInputDevice(): InputDevice;
+//# sourceMappingURL=use-input-device.d.ts.map

package/dist/hooks/use-input-device.luau

@@ -0,0 +1,38 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useEventListener = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useEventListener
+local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local getInputType = function(inputType)
+	if inputType == nil then
+		inputType = UserInputService:GetLastInputType()
+	end
+	if inputType == Enum.UserInputType.Keyboard or inputType == Enum.UserInputType.MouseMovement then
+		return "keyboard"
+	elseif inputType == Enum.UserInputType.Gamepad1 then
+		return "gamepad"
+	elseif inputType == Enum.UserInputType.Touch then
+		return "touch"
+	end
+end
+--[[
+	*
+	 * Returns the current input device being used by the player.
+	 * @returns An InputDevice string.
+	 
+]]
+local function useInputDevice()
+	local device, setDevice = useState(function()
+		return getInputType() or "keyboard"
+	end)
+	useEventListener(UserInputService.LastInputTypeChanged, function(inputType)
+		local newDevice = getInputType(inputType)
+		if newDevice ~= nil then
+			setDevice(newDevice)
+		end
+	end)
+	return device
+end
+return {
+	useInputDevice = useInputDevice,
+}

package/dist/index.d.ts

@@ -1,7 +1,49 @@
-export { Padding, type PaddingProps } from "./Padding";
-export { Divider, type DividerProps } from "./Divider";
-export { Checkmark, type CheckmarkProps } from "./Checkmark";
-export { DelayRender, type DelayRenderProps } from "./DelayRender";
-export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary";
-export { TextField, type TextFieldProps } from "./TextField";
+export { Checkmark, type CheckmarkProps } from "./display/Checkmark";
+export { ErrorHandler, ErrorPage } from "./error-handler/index";
+export { TextBox, type TextBoxProps } from "./form/TextBox";
+export { TextField, type TextFieldProps } from "./form/TextField";
+export { Divider, type DividerProps } from "./layout/Divider";
+export { Padding, type PaddingProps } from "./layout/Padding";
+export { DelayRender, type DelayRenderProps } from "./utils/DelayRender";
+export { ErrorBoundary, type ErrorBoundaryProps } from "./utils/ErrorBoundary";
+export { Button, type ButtonProps } from "./buttons/Button";
+export { ReactiveButton, type ReactiveButtonProps } from "./buttons/ReactiveButton";
+export { useButtonAnimation, type ButtonAnimation } from "./hooks/use-button-animation";
+export { useButtonState, type ButtonEvents } from "./hooks/use-button-state";
+export { useInputDevice, type InputDevice } from "./hooks/use-input-device";
+export { useTooltip } from "./tooltip/useTooltip";
+export { ClickOutsideLayer, ClickOutsideOverlay, type ClickOutsideLayerProps, type ClickOutsideOverlayProps, } from "./utils/ClickOutsideOverlay";
+export { Outline, type OutlineProps } from "./utils/Outline";
+export { Checkbox, type CheckboxProps } from "./form/Checkbox";
+export { Radio, type RadioProps } from "./form/Radio";
+export { IconRoundButton, type IconRoundButtonProps } from "./buttons/IconRoundButton";
+export { IconTileButton, type IconTileButtonProps } from "./buttons/IconTileButton";
+export { PrimaryButton, type PrimaryButtonProps } from "./buttons/PrimaryButton";
+export { TextButton, TextButtonVariant, type TextButtonProps } from "./buttons/TextButton";
+export { CheckboxRow, type CheckboxRowProps } from "./form/CheckboxRow";
+export { DropdownRow, type DropdownRowProps } from "./form/DropdownRow";
+export { FormRow, type FormRowProps } from "./form/FormRow";
+export { InputRow, type InputRowProps } from "./form/InputRow";
+export { RadioRow, type RadioRowProps } from "./form/RadioRow";
+export { Accordion, type AccordionProps } from "./layout/Accordion";
+export { Section, type SectionProps } from "./layout/Section";
+export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from "./layout/SegmentedToggle";
+export { ExampleTable } from "./table/ExampleTable";
+export { Table, type TableProps } from "./table/Table";
+export { TableCell, type TableCellProps } from "./table/TableCell";
+export { TableFooter, type TableFooterProps } from "./table/TableFooter";
+export { TableHeader, type TableHeaderProps } from "./table/TableHeader";
+export { TableRow, type TableRowProps } from "./table/TableRow";
+export { DropdownButton, type DropdownButtonProps } from "./buttons/DropdownButton";
+export { DropdownOptionButton, type DropdownOptionButtonProps } from "./buttons/DropdownOptionButton";
+export { Dropdown, type DropdownOption, type DropdownProps } from "./form/Dropdown";
+export { Legend, type LegendProps } from "./display/Legend";
+export { PillText, type PillTextProps } from "./display/PillText";
+export { TimeAgo, type TimeAgoProps } from "./display/TimeAgo";
+export { Tooltip, type TooltipProps } from "./tooltip/Tooltip";
+export { validateAngle, validateNumber, validateNumberBounds, validatePosNumber } from "./form/validation";
+export { InputRound, type InputRoundProps } from "./form/InputRound";
+export { RoundEmoji, type RoundEmojiProps } from "./form/RoundEmoji";
+export { DynamicWindow, type ExtendableFrameProps } from "./DynamicWindow/DynamicWindow";
+export { clampViewportPosition, getInputViewportPos, getMouseViewportPos, resolveWindowSpawnPosition, type Mode, type ResizeCorner, type WindowSpawnOptions, } from "./DynamicWindow/DynamicWindow.utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/init.luau

@@ -1,10 +1,76 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-exports.Padding = TS.import(script, script, "Padding").Padding
-exports.Divider = TS.import(script, script, "Divider").Divider
-exports.Checkmark = TS.import(script, script, "Checkmark").Checkmark
-exports.DelayRender = TS.import(script, script, "DelayRender").DelayRender
-exports.ErrorBoundary = TS.import(script, script, "ErrorBoundary").ErrorBoundary
-exports.TextField = TS.import(script, script, "TextField").TextField
+exports.Checkmark = TS.import(script, script, "display", "Checkmark").Checkmark
+local _error_handler = TS.import(script, script, "error-handler")
+exports.ErrorHandler = _error_handler.ErrorHandler
+exports.ErrorPage = _error_handler.ErrorPage
+exports.TextBox = TS.import(script, script, "form", "TextBox").TextBox
+exports.TextField = TS.import(script, script, "form", "TextField").TextField
+exports.Divider = TS.import(script, script, "layout", "Divider").Divider
+exports.Padding = TS.import(script, script, "layout", "Padding").Padding
+exports.DelayRender = TS.import(script, script, "utils", "DelayRender").DelayRender
+exports.ErrorBoundary = TS.import(script, script, "utils", "ErrorBoundary").ErrorBoundary
+-- Utilities
+exports.Button = TS.import(script, script, "buttons", "Button").Button
+exports.ReactiveButton = TS.import(script, script, "buttons", "ReactiveButton").ReactiveButton
+exports.useButtonAnimation = TS.import(script, script, "hooks", "use-button-animation").useButtonAnimation
+exports.useButtonState = TS.import(script, script, "hooks", "use-button-state").useButtonState
+exports.useInputDevice = TS.import(script, script, "hooks", "use-input-device").useInputDevice
+exports.useTooltip = TS.import(script, script, "tooltip", "useTooltip").useTooltip
+local _ClickOutsideOverlay = TS.import(script, script, "utils", "ClickOutsideOverlay")
+exports.ClickOutsideLayer = _ClickOutsideOverlay.ClickOutsideLayer
+exports.ClickOutsideOverlay = _ClickOutsideOverlay.ClickOutsideOverlay
+exports.Outline = TS.import(script, script, "utils", "Outline").Outline
+-- Form Inputs
+exports.Checkbox = TS.import(script, script, "form", "Checkbox").Checkbox
+exports.Radio = TS.import(script, script, "form", "Radio").Radio
+-- Buttons
+exports.IconRoundButton = TS.import(script, script, "buttons", "IconRoundButton").IconRoundButton
+exports.IconTileButton = TS.import(script, script, "buttons", "IconTileButton").IconTileButton
+exports.PrimaryButton = TS.import(script, script, "buttons", "PrimaryButton").PrimaryButton
+local _TextButton = TS.import(script, script, "buttons", "TextButton")
+exports.TextButton = _TextButton.TextButton
+exports.TextButtonVariant = _TextButton.TextButtonVariant
+-- Form Layout
+exports.CheckboxRow = TS.import(script, script, "form", "CheckboxRow").CheckboxRow
+exports.DropdownRow = TS.import(script, script, "form", "DropdownRow").DropdownRow
+exports.FormRow = TS.import(script, script, "form", "FormRow").FormRow
+exports.InputRow = TS.import(script, script, "form", "InputRow").InputRow
+exports.RadioRow = TS.import(script, script, "form", "RadioRow").RadioRow
+exports.Accordion = TS.import(script, script, "layout", "Accordion").Accordion
+exports.Section = TS.import(script, script, "layout", "Section").Section
+exports.SegmentedToggle = TS.import(script, script, "layout", "SegmentedToggle").SegmentedToggle
+-- Table
+exports.ExampleTable = TS.import(script, script, "table", "ExampleTable").ExampleTable
+exports.Table = TS.import(script, script, "table", "Table").Table
+exports.TableCell = TS.import(script, script, "table", "TableCell").TableCell
+exports.TableFooter = TS.import(script, script, "table", "TableFooter").TableFooter
+exports.TableHeader = TS.import(script, script, "table", "TableHeader").TableHeader
+exports.TableRow = TS.import(script, script, "table", "TableRow").TableRow
+-- Dropdown
+exports.DropdownButton = TS.import(script, script, "buttons", "DropdownButton").DropdownButton
+exports.DropdownOptionButton = TS.import(script, script, "buttons", "DropdownOptionButton").DropdownOptionButton
+exports.Dropdown = TS.import(script, script, "form", "Dropdown").Dropdown
+-- Display
+exports.Legend = TS.import(script, script, "display", "Legend").Legend
+exports.PillText = TS.import(script, script, "display", "PillText").PillText
+exports.TimeAgo = TS.import(script, script, "display", "TimeAgo").TimeAgo
+exports.Tooltip = TS.import(script, script, "tooltip", "Tooltip").Tooltip
+-- Form Validation
+local _validation = TS.import(script, script, "form", "validation")
+exports.validateAngle = _validation.validateAngle
+exports.validateNumber = _validation.validateNumber
+exports.validateNumberBounds = _validation.validateNumberBounds
+exports.validatePosNumber = _validation.validatePosNumber
+-- Form Input Components
+exports.InputRound = TS.import(script, script, "form", "InputRound").InputRound
+exports.RoundEmoji = TS.import(script, script, "form", "RoundEmoji").RoundEmoji
+-- DynamicWindow
+exports.DynamicWindow = TS.import(script, script, "DynamicWindow", "DynamicWindow").DynamicWindow
+local _DynamicWindow_utils = TS.import(script, script, "DynamicWindow", "DynamicWindow.utils")
+exports.clampViewportPosition = _DynamicWindow_utils.clampViewportPosition
+exports.getInputViewportPos = _DynamicWindow_utils.getInputViewportPos
+exports.getMouseViewportPos = _DynamicWindow_utils.getMouseViewportPos
+exports.resolveWindowSpawnPosition = _DynamicWindow_utils.resolveWindowSpawnPosition
 return exports

package/dist/layout/Accordion.d.ts

@@ -0,0 +1,14 @@
+import React from "@rbxts/react";
+interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    isExpanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    backgroundColor?: Color3;
+    backgroundTransparency?: number;
+    cornerRadius?: number;
+    sortOrder?: Enum.SortOrder;
+}
+export declare function Accordion({ title, children, backgroundColor, backgroundTransparency, cornerRadius, sortOrder, isExpanded, onExpandedChange, }: AccordionProps): JSX.Element;
+export type { AccordionProps };
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/layout/Accordion.luau

@@ -0,0 +1,101 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local DEFAULT_EXPANDED = true
+local function Accordion(_param)
+	local title = _param.title
+	local children = _param.children
+	local backgroundColor = _param.backgroundColor
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 0.8
+	end
+	local cornerRadius = _param.cornerRadius
+	if cornerRadius == nil then
+		cornerRadius = 2
+	end
+	local sortOrder = _param.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.Name
+	end
+	local isExpanded = _param.isExpanded
+	local onExpandedChange = _param.onExpandedChange
+	local theme = defaultTheme
+	local rem = useRem()
+	local contentHeight, setContentHeight = useState(0)
+	-- Header visual height must match the header button height below (rem(5))
+	local headerHeight = rem(5)
+	local size, sizeMotion = useMotion(UDim2.new(1, 0, 0, headerHeight))
+	local contentSize, contentSizeMotion = useMotion(UDim2.new(1, 0, 0, if isExpanded then contentHeight else 0))
+	local textSize = rem(3.5)
+	local defaultBgColor = backgroundColor or theme.palette.blueishColor
+	useEffect(function()
+		local target = if isExpanded then contentHeight else 0
+		contentSizeMotion:spring(UDim2.new(1, 0, 0, target), theme.springs.gentle)
+		-- Keep outer size equal to header + animated content height for clipping
+		sizeMotion:spring(UDim2.new(1, 0, 0, headerHeight + target), theme.springs.gentle)
+	end, { isExpanded, contentHeight, headerHeight })
+	local handleToggle = function()
+		local nextExpanded = not isExpanded
+		onExpandedChange(nextExpanded)
+	end
+	return React.createElement(VStack, {
+		size = size,
+		backgroundTransparency = backgroundTransparency,
+		backgroundColor = defaultBgColor,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		clipsDescendants = true,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, rem(cornerRadius)),
+	}), React.createElement(ReactiveButton, {
+		onClick = handleToggle,
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(5)),
+	}, React.createElement(Text, {
+		text = title,
+		textSize = textSize,
+		font = theme.fonts.roboto.light,
+		textScaled = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+		textYAlignment = "Center",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	})), React.createElement(Text, {
+		text = if isExpanded then "×" else "+",
+		textSize = rem(4),
+		textScaled = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(0, rem(5), 1, 0),
+		textYAlignment = "Center",
+		position = UDim2.new(1, 0, 0, 0),
+		anchorPoint = Vector2.new(1, 0),
+	})), React.createElement("frame", {
+		Size = contentSize,
+		BackgroundTransparency = 1,
+		ClipsDescendants = true,
+	}, React.createElement(VStack, {
+		padding = rem(2),
+		spacing = rem(2),
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		change = {
+			AbsoluteSize = function(rbx)
+				setContentHeight(rbx.AbsoluteSize.Y)
+			end,
+		},
+		sortOrder = sortOrder,
+	}, children)))
+end
+return {
+	Accordion = Accordion,
+}

package/dist/{Divider.luau → layout/Divider.luau}

@@ -2,7 +2,7 @@
 local TS = _G[script]
 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 DEFAULT_COLOR = Color3.fromRGB(255, 255, 255)
 local function Divider(_param)
 	local orientation = _param.orientation

package/dist/layout/Section.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+interface SectionProps {
+    title: string;
+    children: React.ReactNode;
+    cornerRadius?: number;
+    sortOrder?: Enum.SortOrder;
+}
+export declare function Section({ title, children, cornerRadius, sortOrder, }: SectionProps): JSX.Element;
+export type { SectionProps };
+//# sourceMappingURL=Section.d.ts.map

package/dist/layout/Section.luau

@@ -0,0 +1,51 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function Section(_param)
+	local title = _param.title
+	local children = _param.children
+	local cornerRadius = _param.cornerRadius
+	if cornerRadius == nil then
+		cornerRadius = 2
+	end
+	local sortOrder = _param.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.Name
+	end
+	local theme = defaultTheme
+	local rem = useRem()
+	local textSize = rem(3.5)
+	return React.createElement(VStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		verticalAlignment = Enum.VerticalAlignment.Top,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, rem(cornerRadius)),
+	}), React.createElement(VStack, {
+		size = UDim2.new(1, 0, 0, rem(8)),
+		backgroundTransparency = 1,
+	}, React.createElement(Text, {
+		text = title,
+		textSize = rem(3),
+		textScaled = true,
+		richText = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+		textYAlignment = "Center",
+		textXAlignment = "Left",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))), React.createElement(VStack, {
+		spacing = rem(2),
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		sortOrder = sortOrder,
+	}, children))
+end
+return {
+	Section = Section,
+}