@rbxts/react-clean-ui 1.2.9 → 1.4.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 ShaderCloud
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,3 +1,113 @@
 # React Clean UI
 
-[Read the Docs here](https://shadercloud.github.io/rbxts-react-clean-ui/)
+An easy-to-use, theme-aware React component library for building polished Roblox interfaces with [`roblox-ts`](https://roblox-ts.com/) and [`@rbxts/react`](https://www.npmjs.com/package/@rbxts/react).
+
+Stop hand-rolling sizes, spacing, colours, and layout on every screen — compose your UI from reusable, styled components instead.
+
+[**📖 Read the full docs**](https://shadercloud.github.io/rbxts-react-clean-ui/) · [**📦 npm package**](https://www.npmjs.com/package/@rbxts/react-clean-ui)
+
+## Install
+
+```bash
+npm install @rbxts/react-clean-ui
+```
+
+## Preview
+
+| | | |
+|---|---|---|
+| ![Card](https://shadercloud.github.io/rbxts-react-clean-ui/images/card_preview.png) | ![Checkbox](https://shadercloud.github.io/rbxts-react-clean-ui/images/checkbox_preview.png) | ![Toast](https://shadercloud.github.io/rbxts-react-clean-ui/images/toast_preview.gif) |
+| ![Select](https://shadercloud.github.io/rbxts-react-clean-ui/images/select_preview.gif) | ![Menu](https://shadercloud.github.io/rbxts-react-clean-ui/images/menu_preview.gif) | ![Slider](https://shadercloud.github.io/rbxts-react-clean-ui/images/slider_preview.gif) |
+| ![Input](https://shadercloud.github.io/rbxts-react-clean-ui/images/input_preview.gif) | ![Tooltip](https://shadercloud.github.io/rbxts-react-clean-ui/images/tooltip_preview.gif) | ![Draggable](https://shadercloud.github.io/rbxts-react-clean-ui/images/draggable_preview.gif) |
+
+More components, including layouts, forms, charts, and navigation, are in the [docs](https://shadercloud.github.io/rbxts-react-clean-ui/).
+
+## Why React Clean UI?
+
+Roblox gives you powerful low-level UI instances, but every screen ends up repeating the same work: calculating sizes and positions, configuring layout and spacing, applying colours/typography/corners/shadows, and keeping it all visually consistent.
+
+React Clean UI moves that repeated work into reusable components, helpers, and theme definitions — you describe **what** the interface should contain, the library handles **how** it's presented.
+
+## Features
+
+- 🧩 **Composable components** — containers, stacks, boxes, buttons, text, fieldsets, inputs, selects, and more
+- 🎨 **Theme-driven design** — colours, spacing, typography, radii, and semantic intent colours (`primary`, `info`, `success`, `danger`) defined centrally; light/dark and custom themes supported
+- 📐 **Familiar sizing & spacing** — concise, CSS-like props translated into native Roblox `UDim`/`UDim2`
+- 📱 **Responsive layouts** — breakpoint-aware components for phone, tablet, desktop, and console
+- ⚛️ **Built for Roblox React** — renders ordinary Roblox GUI instances through `@rbxts/react`; plays nicely with hooks, contexts, Rojo, and UI Labs stories
+
+## Quick start
+
+First set up a roblox-ts project (`npm init roblox-ts`), then:
+
+```bash
+npm install @rbxts/react-clean-ui
+```
+
+```tsx
+// src/client/demo.client.tsx
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+import { CleanUiProvider, DefaultTheme, Container, Box, VStack, HStack, FlexItem, Text, Button, Fieldset, Input, Select } from "@rbxts/react-clean-ui";
+
+const playerGui = game.GetService("Players").LocalPlayer.WaitForChild("PlayerGui") as PlayerGui;
+
+const screenGui = new Instance("ScreenGui");
+screenGui.ResetOnSpawn = false;
+screenGui.IgnoreGuiInset = true;
+screenGui.Parent = playerGui;
+
+const root = ReactRoblox.createRoot(screenGui);
+
+root.render(
+  <CleanUiProvider theme={DefaultTheme}>
+    <Container width="90%" center>
+      <Box>
+        <VStack>
+          <Container>
+            <HStack>
+              <FlexItem>
+                <Text text="Basic Form" variant="title" />
+              </FlexItem>
+              <Button icon="times" />
+            </HStack>
+          </Container>
+          <Fieldset>
+            <Fieldset.Label>
+              <Text text="Enter Name:" />
+            </Fieldset.Label>
+            <Fieldset.Control>
+              <Input placeholder="John Doe" value="" />
+            </Fieldset.Control>
+          </Fieldset>
+          <Fieldset>
+            <Fieldset.Label>
+              <Text text="Country:" />
+            </Fieldset.Label>
+            <Fieldset.Control>
+              <Select>
+                <Select.Option text="United Kingdom" />
+                <Select.Option text="United States" />
+                <Select.Option text="Canada" />
+              </Select>
+            </Fieldset.Control>
+          </Fieldset>
+          <Container>
+            <Button text="Submit Form" intent="info" icon="arrow-circle-right" />
+          </Container>
+        </VStack>
+      </Box>
+    </Container>
+  </CleanUiProvider>
+);
+```
+
+See the [Quick Start docs](https://shadercloud.github.io/rbxts-react-clean-ui/quickstart) for the full walkthrough (including `default.project.json` setup), and the [`Stories`](./Stories) directory for live UI Labs examples you can open directly in Roblox Studio.
+
+## Project status
+
+React Clean UI is under active development and being built in public. APIs, component props, and installation details may still change before a first stable release. Feedback, issues, and contributions are welcome.
+
+## License
+
+[ISC](./LICENSE)

package/out/Components/Chart/Pie.luau

@@ -132,14 +132,7 @@ local function Pie(props)
 			end
 			sectionRemaining = 1 + sectionRemaining
 		end
-		local _condition = not props["Label-hidden"]
-		if _condition then
-			_condition = v.label
-			if _condition ~= "" and _condition then
-				_condition = (not props["label-hover"] or state.hover == index)
-			end
-		end
-		if _condition ~= "" and _condition then
+		if not props["Label-hidden"] and v.label ~= nil and v.label ~= "" and (not props["label-hover"] or state.hover == index) then
 			local label = v.label
 			local isTextLabel = type(label) == "string" or label.text ~= nil
 			local position = if #props.values == 1 then UDim2.fromScale(0.5, 0.5) else getCirclePosition(totalPercent, props["label-distance"])
@@ -157,31 +150,31 @@ local function Pie(props)
 					BackgroundColor3 = background,
 					BorderSizePixel = 0,
 				}
-				local _condition_1 = theme.components.charts.pie.labels.backgroundTransparency
-				if _condition_1 == nil then
-					_condition_1 = theme.components.box.backgroundTransparency
+				local _condition = theme.components.charts.pie.labels.backgroundTransparency
+				if _condition == nil then
+					_condition = theme.components.box.backgroundTransparency
 				end
-				_attributes.BackgroundTransparency = _condition_1
+				_attributes.BackgroundTransparency = _condition
 				local _exp_2 = React.createElement(Text, {
 					name = "PieLabelText",
 					text = text,
 					typography = TypographyHelper:getTypography(theme, "md", theme.components.charts.pie.labels.typography),
 				})
 				local _attributes_1 = {}
-				local _condition_2 = theme.components.charts.pie.labels.cornerRadius
-				if _condition_2 == nil then
-					_condition_2 = theme.components.box.cornerRadius
+				local _condition_1 = theme.components.charts.pie.labels.cornerRadius
+				if _condition_1 == nil then
+					_condition_1 = theme.components.box.cornerRadius
 				end
-				_attributes_1.radius = _condition_2
+				_attributes_1.radius = _condition_1
 				local _exp_3 = React.createElement(Corners, _attributes_1)
 				local _attributes_2 = {
 					key = "Stroke",
 				}
-				local _condition_3 = theme.components.charts.pie.labels.borderThickness
-				if _condition_3 == nil then
-					_condition_3 = theme.components.box.borderThickness
+				local _condition_2 = theme.components.charts.pie.labels.borderThickness
+				if _condition_2 == nil then
+					_condition_2 = theme.components.box.borderThickness
 				end
-				_attributes_2.Thickness = _condition_3
+				_attributes_2.Thickness = _condition_2
 				_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 				_attributes_2.Color = border
 				local _arg0_1 = React.createElement("frame", _attributes, _exp_2, _exp_3, React.createElement("uistroke", _attributes_2), React.createElement(Padding, {

package/out/Components/Input/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+import { BackgroundElementProps, CssPadding, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
 import { IconProps } from "../Surface";
 import { ThemeTemplate } from "../../Theme/theme.template";
 export type ButtonStyleOverride = Partial<ThemeTemplate["components"]["button"]>;
@@ -14,12 +14,14 @@ export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIn
     LayoutOrder?: number;
     styleOverride?: ButtonStyleOverride;
     name?: string;
+    padding?: CssPadding;
 }
 export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
     children?: string;
     text: string;
     disabled?: boolean;
     styleOverride?: ButtonStyleOverride;
+    LayoutOrder?: number;
 }
 declare function ButtonText(props: ButtonTextProps): React.JSX.Element;
 export interface ButtonIconProps extends IconProps, IntentElementProps {

package/out/Components/Input/Button.luau

@@ -71,6 +71,7 @@ local function ButtonText(props)
 		end
 	end
 	_attributes.typography = TypographyHelper:getTypography(theme, _exp, _object)
+	_attributes.LayoutOrder = props.LayoutOrder
 	local _exp_1 = props.intent
 	local _exp_2 = if props.disabled then "disabled" else "default"
 	local _exp_3 = theme.components.button.intents
@@ -93,6 +94,7 @@ local function ButtonIcon(props)
 	_attributes.icon = props.icon
 	_attributes.spinning = props.spinning
 	_attributes.speed = props.speed
+	_attributes.LayoutOrder = props.LayoutOrder
 	local _exp = props.intent
 	local _exp_1 = if props.disabled then "disabled" else "default"
 	local _exp_2 = theme.components.button.intents
@@ -284,6 +286,7 @@ local Button = React.forwardRef(function(props, ref)
 		spacing = props.spacing,
 		Wraps = false,
 	}, props.icon ~= nil and React.createElement(ButtonIcon, {
+		LayoutOrder = 1,
 		scale = props.scale,
 		intent = props.intent,
 		disabled = props.disabled,
@@ -291,6 +294,7 @@ local Button = React.forwardRef(function(props, ref)
 		spinning = props.spinning,
 		styleOverride = props.styleOverride,
 	}), props.text ~= nil and React.createElement(ButtonText, {
+		LayoutOrder = 2,
 		text = props.text,
 		intent = props.intent,
 		disabled = props.disabled,

package/out/Components/Interaction/Tooltip.d.ts

@@ -6,6 +6,8 @@ interface TooltipProps extends BoxProps, IntentElementProps {
     content: React.ReactNode | string;
     children: React.ReactElement<React.InstanceProps<GuiObject>>;
     placement?: TooltipPlacement;
+    disabled?: boolean;
+    open?: boolean;
 }
 export declare function Tooltip(props: TooltipProps): React.JSX.Element;
 export {};

package/out/Components/Interaction/Tooltip.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
 local CleanThemeContext = _Contexts.CleanThemeContext
+local DragStateContext = _Contexts.DragStateContext
 local OverlayConsumer = _Contexts.OverlayConsumer
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
 local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
@@ -13,6 +14,7 @@ local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local CssHelper = _Helpers.CssHelper
+local ElementHelper = _Helpers.ElementHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
 local function TooltipPopup(props)
@@ -30,8 +32,7 @@ local function TooltipPopup(props)
 		left = 0,
 		right = 0,
 	}
-	local _value = theme.components.tooltip.boxShadow
-	local shadow = if _value ~= 0 and _value == _value and _value ~= "" and _value then CssHelper:parseCssShadow(theme.components.tooltip.boxShadow) else nil
+	local shadow = if theme.components.tooltip.boxShadow ~= nil and theme.components.tooltip.boxShadow ~= 0 then CssHelper:parseCssShadow(theme.components.tooltip.boxShadow) else nil
 	if shadow ~= nil then
 		resolvedPadding.top += shadow.blurRadius.Offset + shadow.spread.Y.Offset - shadow.offset.Y.Offset
 		resolvedPadding.bottom += shadow.blurRadius.Offset + shadow.spread.Y.Offset + shadow.offset.Y.Offset
@@ -178,12 +179,20 @@ end
 local function Tooltip(props)
 	local targetRef = React.useRef()
 	local hideRequest = React.useRef(0)
+	local hoveredRef = React.useRef(false)
+	local shownRef = React.useRef(false)
 	local target, setTarget = React.useState()
 	local visible, setVisible = React.useState(false)
 	local theme = React.useContext(CleanThemeContext)
+	local dragState = React.useContext(DragStateContext)
 	local fadeDuration = theme.components.tooltip.fadeDuration
-	local show = function()
-		hideRequest.current += 1
+	local suppressed = props.disabled == true or dragState.preview or dragState.dragging
+	local suppressedRef = React.useRef(suppressed)
+	suppressedRef.current = suppressed
+	local controlled = props.open ~= nil
+	local controlledRef = React.useRef(controlled)
+	controlledRef.current = controlled
+	local captureTarget = function()
 		local _result = targetRef.current
 		if _result ~= nil then
 			_result = _result.AbsolutePosition
@@ -204,9 +213,15 @@ local function Tooltip(props)
 			_object[_left_1] = _result_2
 			setTarget(_object)
 		end
+	end
+	local show = function()
+		shownRef.current = true
+		hideRequest.current += 1
+		captureTarget()
 		setVisible(true)
 	end
 	local hide = function()
+		shownRef.current = false
 		setVisible(false)
 		local request = hideRequest.current + 1
 		hideRequest.current = request
@@ -220,40 +235,53 @@ local function Tooltip(props)
 			end
 		end)
 	end
-	local _exp = props.children
-	local _object = {
-		ref = targetRef,
-	}
-	local _left = "Event"
-	local _object_1 = {}
-	local _spread = props.children.props.Event
-	if _spread then
-		for _k, _v in _spread do
-			_object_1[_k] = _v
+	React.useEffect(function()
+		if suppressed then
+			hoveredRef.current = false
 		end
-	end
-	_object_1.MouseEnter = function(guiObject, x, y)
-		local _result = props.children.props.Event
-		if _result ~= nil then
-			_result = _result.MouseEnter
-			if _result ~= nil then
-				_result(guiObject, x, y)
+		local _condition = not suppressed
+		if _condition then
+			local _condition_1 = props.open
+			if _condition_1 == nil then
+				_condition_1 = hoveredRef.current
 			end
+			_condition = _condition_1
 		end
-		show()
-	end
-	_object_1.MouseLeave = function(guiObject, x, y)
-		local _result = props.children.props.Event
-		if _result ~= nil then
-			_result = _result.MouseLeave
-			if _result ~= nil then
-				_result(guiObject, x, y)
-			end
+		local wanted = _condition
+		if wanted and not shownRef.current then
+			show()
+		elseif not wanted and shownRef.current then
+			hide()
 		end
-		hide()
-	end
-	_object[_left] = _object_1
-	local child = React.cloneElement(_exp, _object)
+	end, { suppressed, props.open })
+	React.useEffect(function()
+		local instance = targetRef.current
+		if not visible or instance == nil then
+			return nil
+		end
+		local positionChanged = instance:GetPropertyChangedSignal("AbsolutePosition"):Connect(captureTarget)
+		local sizeChanged = instance:GetPropertyChangedSignal("AbsoluteSize"):Connect(captureTarget)
+		return function()
+			positionChanged:Disconnect()
+			sizeChanged:Disconnect()
+		end
+	end, { visible })
+	local child = ElementHelper:cloneWithEvents(props.children, {
+		ref = targetRef,
+	}, {
+		MouseEnter = function()
+			hoveredRef.current = true
+			if not controlledRef.current and not suppressedRef.current then
+				show()
+			end
+		end,
+		MouseLeave = function()
+			hoveredRef.current = false
+			if not controlledRef.current then
+				hide()
+			end
+		end,
+	})
 	return React.createElement(React.Fragment, nil, child, target ~= nil and (React.createElement(OverlayConsumer, {
 		render = function(overlay)
 			if overlay == nil then

package/out/Components/Layout/Accordion.d.ts

@@ -17,16 +17,27 @@ interface AccordionContentProps extends PaddingProps {
     text?: string;
 }
 declare function AccordionContent(_props: AccordionContentProps): undefined;
-export interface AccordionProps extends ScalableElementProps {
+interface AccordionBaseProps extends ScalableElementProps {
     children?: React.ReactNode;
     collapsible?: boolean;
     animationDuration?: number;
+    autoSize?: boolean;
+    keepMounted?: boolean;
+    name?: string;
+}
+export interface AccordionProps extends AccordionBaseProps {
+    multiple?: false;
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
-    name?: string;
 }
-type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<ImageLabel>> & {
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    multiple: true;
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type AccordionComponent = React.ForwardRefExoticComponent<(AccordionProps | AccordionMultipleProps) & React.RefAttributes<ImageLabel>> & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     Content: typeof AccordionContent;

package/out/Components/Layout/Accordion.luau

@@ -119,15 +119,33 @@ local function AccordionHeaderVisual(props)
 		Rotation = rotation,
 	}))))
 end
+local function toValues(value)
+	if value == nil then
+		return {}
+	end
+	local _value = value
+	return if type(_value) == "string" then { value } else value
+end
 local function RenderedAccordionItem(props)
 	local theme = React.useContext(CleanThemeContext)
 	local mounted, setMounted = React.useState(props.open)
 	local height, heightTween = useTween(0, {
 		duration = props.duration,
 	})
+	local contentRef = React.useRef()
 	React.useEffect(function()
 		if props.open then
 			setMounted(true)
+			local content = contentRef.current
+			if content ~= nil then
+				heightTween:setGoal(content.AbsoluteSize.Y, {
+					duration = props.duration,
+				})
+				if props.duration == 0 then
+					heightTween:setPosition(content.AbsoluteSize.Y)
+				end
+				heightTween:start()
+			end
 		else
 			heightTween:setGoal(0, {
 				duration = props.duration,
@@ -252,11 +270,12 @@ local function RenderedAccordionItem(props)
 		disabled = props.disabled,
 		duration = props.duration,
 		open = props.open,
-	})), mounted and (React.createElement("frame", {
+	})), (mounted or props.keepMounted) and (React.createElement("frame", {
 		key = "ContentClip",
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		ClipsDescendants = true,
+		Visible = mounted,
 		Size = height:map(function(value)
 			local _exp = UDim2.fromScale(1, 0)
 			local _arg0 = UDim2.fromOffset(0, value)
@@ -264,6 +283,7 @@ local function RenderedAccordionItem(props)
 		end),
 	}, React.createElement("frame", {
 		key = "Content",
+		ref = contentRef,
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
 		BorderSizePixel = 0,
@@ -341,9 +361,10 @@ local Accordion = React.forwardRef(function(props, ref)
 		end)
 		return parsed
 	end, { props.children })
-	local initial = if props.defaultValue ~= nil then { props.defaultValue } else {}
-	local uncontrolled, setUncontrolled = React.useState(initial)
-	local supplied = if props.value ~= nil then { props.value } else uncontrolled
+	local uncontrolled, setUncontrolled = React.useState(function()
+		return toValues(props.defaultValue)
+	end)
+	local supplied = if props.value ~= nil then toValues(props.value) else uncontrolled
 	local _set = {}
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
@@ -372,7 +393,8 @@ local Accordion = React.forwardRef(function(props, ref)
 		end
 	end
 	-- ▲ ReadonlyArray.filter ▲
-	local openValues = _newValue_1
+	local filtered = _newValue_1
+	local openValues = if props.multiple or #filtered <= 1 then filtered else { filtered[1] }
 	React.useEffect(function()
 		local _condition = props.value == nil
 		if _condition then
@@ -406,7 +428,38 @@ local Accordion = React.forwardRef(function(props, ref)
 		local _value = item.value
 		local isOpen = table.find(openValues, _value) ~= nil
 		local nextValues
-		if isOpen then
+		if props.multiple then
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_2 = table.create(#items)
+			local _callback_2 = function(other)
+				return other.value
+			end
+			for _k, _v in items do
+				_newValue_2[_k] = _callback_2(_v, _k - 1, items)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue_3 = {}
+			local _callback_3 = function(value)
+				local _result
+				if value == item.value then
+					_result = not isOpen
+				else
+					local _value_1 = value
+					_result = table.find(openValues, _value_1) ~= nil
+				end
+				return _result
+			end
+			local _length_1 = 0
+			for _k, _v in _newValue_2 do
+				if _callback_3(_v, _k - 1, _newValue_2) == true then
+					_length_1 += 1
+					_newValue_3[_length_1] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			nextValues = _newValue_3
+		elseif isOpen then
 			if not props.collapsible then
 				return nil
 			end
@@ -417,9 +470,16 @@ local Accordion = React.forwardRef(function(props, ref)
 		if props.value == nil then
 			setUncontrolled(nextValues)
 		end
-		local _result = props.onValueChange
-		if _result ~= nil then
-			_result(nextValues[1])
+		if props.multiple then
+			local _result = props.onValueChange
+			if _result ~= nil then
+				_result(nextValues)
+			end
+		else
+			local _result = props.onValueChange
+			if _result ~= nil then
+				_result(nextValues[1])
+			end
 		end
 	end
 	local _attributes = {
@@ -431,7 +491,8 @@ local Accordion = React.forwardRef(function(props, ref)
 	end
 	_attributes.name = _condition
 	_attributes.width = "100%"
-	_attributes.height = "100%"
+	_attributes.height = if props.autoSize then nil else "100%"
+	_attributes.AutomaticSize = if props.autoSize then Enum.AutomaticSize.Y else nil
 	_attributes.ClipsDescendants = true
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.accordion.cornerRadius,
@@ -459,6 +520,11 @@ local Accordion = React.forwardRef(function(props, ref)
 			_condition_1 = theme.components.accordion.animation.duration
 		end
 		_attributes_1.duration = _condition_1
+		local _condition_2 = props.keepMounted
+		if _condition_2 == nil then
+			_condition_2 = false
+		end
+		_attributes_1.keepMounted = _condition_2
 		_attributes_1.onActivate = function()
 			return activate(item)
 		end

package/out/Components/Layout/Draggable.d.ts

@@ -1,15 +1,18 @@
 import React from "@rbxts/react";
 import { DroppableRegistration } from "../../Providers";
+import { DragEventInfo } from "../../Contexts";
 type GuiObjectProps = React.InstanceProps<GuiObject>;
 type GuiElement = React.ReactElement<GuiObjectProps>;
 interface DragHandleProps {
     children: GuiElement;
 }
 declare function DragHandle({ children }: DragHandleProps): React.ReactElement<GuiObjectProps, string | React.JSXElementConstructor<any>>;
-interface DraggableProps {
-    onDropped?: (droppable?: DroppableRegistration) => void;
-    onDragged?: (droppable?: DroppableRegistration) => void;
-    onStartDrag?: () => void;
+export interface DraggableProps {
+    onDropped?: (droppable: DroppableRegistration | undefined, info: DragEventInfo) => void;
+    onDragged?: (droppable: DroppableRegistration | undefined, info: DragEventInfo) => void;
+    onStartDrag?: (info: DragEventInfo) => void;
+    inputTypes?: Enum.UserInputType[];
+    renderOverlay?: () => React.ReactNode;
     placeholder?: boolean;
     retainPosition?: boolean;
     children: GuiElement;