@rbxts/react-clean-ui 1.0.38 → 1.2.2

package/out/Components/Interaction/Tooltip.luau

@@ -103,50 +103,61 @@ local function TooltipPopup(props)
 	until true
 	local intent = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.tooltip.intents)
 	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, props.spacing, theme.components.tooltip.spacing))
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Tooltip"
+	end
+	_attributes.key = _condition
+	_attributes.Position = UDim2.fromOffset(position.X, position.Y)
+	_attributes.AnchorPoint = anchor
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.GroupTransparency = groupTransparency
+	_attributes.BackgroundTransparency = 1
 	local _exp_1 = React.createElement(Padding, {
 		resolvedPadding = resolvedPadding,
 	})
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
-	_attributes.value = theme.components.tooltip.boxShadow
-	local _exp_2 = React.createElement(BoxShadow, _attributes)
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	_attributes_1.value = theme.components.tooltip.boxShadow
+	local _exp_2 = React.createElement(BoxShadow, _attributes_1)
 	local _exp_3 = React.createElement(Corners, {
 		radius = theme.components.button.cornerRadius,
 	})
-	local _attributes_1 = table.clone(props)
-	setmetatable(_attributes_1, nil)
-	_attributes_1.resolvedPadding = padding
-	local _exp_4 = React.createElement(Padding, _attributes_1)
-	local _attributes_2 = {}
-	local _condition = props["border-thickness"]
-	if _condition == nil then
-		_condition = theme.components.box.borderThickness
+	local _attributes_2 = table.clone(props)
+	setmetatable(_attributes_2, nil)
+	_attributes_2.resolvedPadding = padding
+	local _exp_4 = React.createElement(Padding, _attributes_2)
+	local _attributes_3 = {
+		key = "Stroke",
+	}
+	local _condition_1 = props["border-thickness"]
+	if _condition_1 == nil then
+		_condition_1 = theme.components.box.borderThickness
 	end
-	_attributes_2.Thickness = _condition
-	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
-	_attributes_2.Color = props["border-color"] or intent.borderColor
-	local _exp_5 = React.createElement("uistroke", _attributes_2)
+	_attributes_3.Thickness = _condition_1
+	_attributes_3.BorderStrokePosition = Enum.BorderStrokePosition.Inner
+	_attributes_3.Color = props["border-color"] or intent.borderColor
+	local _exp_5 = React.createElement("uistroke", _attributes_3)
 	local _content = props.content
-	return React.createElement("canvasgroup", {
-		Position = UDim2.fromOffset(position.X, position.Y),
-		AnchorPoint = anchor,
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		GroupTransparency = groupTransparency,
-		BackgroundTransparency = 1,
-	}, React.createElement("frame", {
+	return React.createElement("canvasgroup", _attributes, React.createElement("frame", {
+		key = "ShadowPadding",
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
 	}, _exp_1, React.createElement("frame", {
+		key = "Content",
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundColor3 = intent.backgroundColor,
 		BackgroundTransparency = intent.backgroundTransparency,
 	}, _exp_2, _exp_3, _exp_4, _exp_5, if type(_content) == "string" then React.createElement(Text, {
+		name = "TooltipText",
 		text = props.content,
 		TextColor3 = intent.textColor,
 	}) else props.content)), pointerSize > 0 and React.createElement("frame", {
+		key = "Pointer",
 		Size = UDim2.fromOffset(pointerSize, pointerSize),
 		AnchorPoint = pointerAnchor,
 		Position = pointerPosition,
@@ -156,6 +167,7 @@ local function TooltipPopup(props)
 		BackgroundTransparency = intent.backgroundTransparency,
 		Rotation = 45,
 	}, React.createElement("uigradient", {
+		key = "Gradient",
 		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.4999, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0) }),
 		Rotation = pointerRotation,
 	})))

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

@@ -1,2 +1,3 @@
+export * from './Modal';
 export * from './Toast';
 export * from './Tooltip';

package/out/Components/Interaction/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "Modal") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Toast") or {} do
 	exports[_k] = _v
 end

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

@@ -1,18 +1,18 @@
 import React from "@rbxts/react";
-import { IconName, ScalableElementProps } from "../../Interfaces";
+import { IconName, PaddingProps, ScalableElementProps } from "../../Interfaces";
 interface AccordionItemProps {
     children?: React.ReactNode;
     value: string;
     disabled?: boolean;
 }
 declare function AccordionItem(_props: AccordionItemProps): undefined;
-interface AccordionHeaderProps {
+interface AccordionHeaderProps extends PaddingProps {
     children?: React.ReactNode | string;
     icon?: IconName;
     text?: string;
 }
 declare function AccordionHeader(_props: AccordionHeaderProps): undefined;
-interface AccordionContentProps {
+interface AccordionContentProps extends PaddingProps {
     children?: React.ReactNode;
     text?: string;
 }
@@ -24,6 +24,7 @@ export interface AccordionProps extends ScalableElementProps {
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
+    name?: string;
 }
 type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<ImageLabel>> & {
     Item: typeof AccordionItem;

package/out/Components/Layout/Accordion.luau

@@ -5,6 +5,7 @@ local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple"
 local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
 local SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
@@ -75,15 +76,17 @@ local function AccordionHeaderVisual(props)
 		return props.header.children
 	end
 	local _exp = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.accordion.header.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.header, theme.components.accordion.header.spacing, theme.components.accordion.header.padding),
 	})
 	local _exp_1 = props.header.icon ~= nil and React.createElement(Icon, {
+		name = "AccordionHeaderIcon",
 		icon = props.header.icon,
 		color = colors.textColor,
 	})
 	local _result_1
 	if props.header.text ~= nil then
 		_result_1 = React.createElement(Text, {
+			name = "AccordionHeaderText",
 			text = props.header.text,
 			TextColor3 = colors.textColor,
 			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
@@ -91,6 +94,7 @@ local function AccordionHeaderVisual(props)
 	else
 		local _children = props.header.children
 		_result_1 = if type(_children) == "string" then React.createElement(Text, {
+			name = "AccordionHeaderText",
 			text = props.header.children,
 			TextColor3 = colors.textColor,
 			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
@@ -101,9 +105,13 @@ local function AccordionHeaderVisual(props)
 		Wraps = false,
 		HorizontalFlex = Enum.UIFlexAlignment.Fill,
 	}, _exp_1, React.createElement(Container, {
+		name = "AccordionHeaderTextContainer",
 		Size = UDim2.new(1, theme.components.accordion.header.indicatorSize, 0, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
-	}, _result_1), React.createElement(Container, nil, React.createElement(Icon, {
+	}, _result_1), React.createElement(Container, {
+		name = "AccordionChevronContainer",
+	}, React.createElement(Icon, {
+		name = "AccordionChevronIcon",
 		icon = "chevron-down",
 		color = if props.disabled then colors.textColor else theme.components.accordion.header.indicatorColor,
 		Size = UDim2.fromOffset(theme.components.accordion.header.indicatorSize, theme.components.accordion.header.indicatorSize),
@@ -148,9 +156,13 @@ local function RenderedAccordionItem(props)
 	local defaultColors = ColorHelper:getIntentColors(theme, "primary", if props.disabled then "disabled" else "default", theme.components.accordion.header.intents)
 	local hoverColors = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.accordion.header.intents)
 	local focusColors = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.accordion.header.intents)
+	local defaultBackgroundImage = CssHelper:resolveBackgroundImage(defaultColors.backgroundImage)
+	local hoverBackgroundImage = CssHelper:resolveBackgroundImage(hoverColors.backgroundImage)
+	local focusBackgroundImage = CssHelper:resolveBackgroundImage(focusColors.backgroundImage)
 	local _condition = not props.first
 	if _condition then
 		local _attributes = {
+			key = "Divider",
 			BackgroundColor3 = theme.components.accordion.borderColor,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
@@ -161,6 +173,7 @@ local function RenderedAccordionItem(props)
 		_condition = (React.createElement("frame", _attributes))
 	end
 	local _attributes = {
+		name = `AccordionHeaderButton-{props.value}`,
 		isSelected = props.open,
 	}
 	local _object = {
@@ -169,7 +182,6 @@ local function RenderedAccordionItem(props)
 		AutoButtonColor = false,
 		AutomaticSize = Enum.AutomaticSize.Y,
 		Size = UDim2.fromScale(1, 0),
-		ImageTransparency = 1,
 		BackgroundColor3 = defaultColors.backgroundColor,
 	}
 	local _left = "BackgroundTransparency"
@@ -179,6 +191,13 @@ local function RenderedAccordionItem(props)
 	end
 	_object[_left] = _condition_1
 	_object.BorderSizePixel = 0
+	_object.Image = defaultBackgroundImage.Image
+	_object.ImageColor3 = defaultBackgroundImage.ImageColor3
+	_object.ImageTransparency = defaultBackgroundImage.ImageTransparency
+	_object.ScaleType = defaultBackgroundImage.ScaleType
+	_object.SliceCenter = defaultBackgroundImage.SliceCenter
+	_object.SliceScale = defaultBackgroundImage.SliceScale
+	_object.TileSize = defaultBackgroundImage.TileSize
 	_object.Event = {
 		Activated = props.onActivate,
 	}
@@ -192,6 +211,13 @@ local function RenderedAccordionItem(props)
 		_condition_2 = 0
 	end
 	_object_1[_left_1] = _condition_2
+	_object_1.Image = hoverBackgroundImage.Image
+	_object_1.ImageColor3 = hoverBackgroundImage.ImageColor3
+	_object_1.ImageTransparency = hoverBackgroundImage.ImageTransparency
+	_object_1.ScaleType = hoverBackgroundImage.ScaleType
+	_object_1.SliceCenter = hoverBackgroundImage.SliceCenter
+	_object_1.SliceScale = hoverBackgroundImage.SliceScale
+	_object_1.TileSize = hoverBackgroundImage.TileSize
 	_attributes.hover = _object_1
 	local _object_2 = {
 		BackgroundColor3 = focusColors.backgroundColor,
@@ -202,12 +228,21 @@ local function RenderedAccordionItem(props)
 		_condition_3 = 0
 	end
 	_object_2[_left_2] = _condition_3
+	_object_2.Image = focusBackgroundImage.Image
+	_object_2.ImageColor3 = focusBackgroundImage.ImageColor3
+	_object_2.ImageTransparency = focusBackgroundImage.ImageTransparency
+	_object_2.ScaleType = focusBackgroundImage.ScaleType
+	_object_2.SliceCenter = focusBackgroundImage.SliceCenter
+	_object_2.SliceScale = focusBackgroundImage.SliceScale
+	_object_2.TileSize = focusBackgroundImage.TileSize
 	_attributes.focus = _object_2
 	return React.createElement(Container, {
+		name = `AccordionItem-{props.value}`,
 		width = "100%",
 	}, React.createElement(VStack, {
 		spacing = "None",
 	}, _condition, React.createElement(HoverButton, _attributes, props.first and (React.createElement("uicorner", {
+		key = "Corners",
 		TopLeftRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
 		TopRightRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
 		BottomLeftRadius = UDim.new(0, 0),
@@ -218,6 +253,7 @@ local function RenderedAccordionItem(props)
 		duration = props.duration,
 		open = props.open,
 	})), mounted and (React.createElement("frame", {
+		key = "ContentClip",
 		BackgroundTransparency = 1,
 		ClipsDescendants = true,
 		Size = height:map(function(value)
@@ -226,6 +262,7 @@ local function RenderedAccordionItem(props)
 			return _exp + _arg0
 		end),
 	}, React.createElement("frame", {
+		key = "Content",
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
 		Size = UDim2.fromScale(1, 0),
@@ -244,8 +281,9 @@ local function RenderedAccordionItem(props)
 			end,
 		},
 	}, React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.accordion.content.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.contentProps, theme.components.accordion.content.spacing, theme.components.accordion.content.padding),
 	}), if props.contentText ~= nil then React.createElement(Text, {
+		name = "AccordionContentText",
 		text = props.contentText,
 	}) else props.content)))))
 end
@@ -264,6 +302,7 @@ local Accordion = React.forwardRef(function(props, ref)
 				return nil
 			end
 			local header
+			local contentProps
 			local contentText
 			local content
 			React.Children.forEach(item.props.children, function(itemChild)
@@ -274,7 +313,7 @@ local Accordion = React.forwardRef(function(props, ref)
 					header = itemChild.props
 				end
 				if itemChild.type == AccordionContent and content == nil then
-					local contentProps = itemChild.props
+					contentProps = itemChild.props
 					contentText = contentProps.text
 					content = contentProps.children
 				end
@@ -292,6 +331,7 @@ local Accordion = React.forwardRef(function(props, ref)
 				end
 				_object[_left] = _condition
 				_object.header = header
+				_object.contentProps = contentProps or {}
 				_object.contentText = contentText
 				_object.content = content
 				table.insert(parsed, _object)
@@ -380,10 +420,22 @@ local Accordion = React.forwardRef(function(props, ref)
 			_result(nextValues[1])
 		end
 	end
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Accordion"
+	end
+	_attributes.name = _condition
+	_attributes.width = "100%"
+	_attributes.height = "100%"
+	_attributes.ClipsDescendants = true
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.accordion.cornerRadius,
 	})
 	local _exp_1 = React.createElement("uistroke", {
+		key = "Stroke",
 		Color = theme.components.accordion.borderColor,
 		Thickness = theme.components.accordion.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Outer,
@@ -391,35 +443,30 @@ local Accordion = React.forwardRef(function(props, ref)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue_2 = table.create(#items)
 	local _callback_2 = function(item, index)
-		local _attributes = {
+		local _attributes_1 = {
 			key = item.value,
 		}
 		for _k, _v in item do
-			_attributes[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes.first = index == 0
+		_attributes_1.first = index == 0
 		local _value = item.value
-		_attributes.open = table.find(openValues, _value) ~= nil
-		local _condition = props.animationDuration
-		if _condition == nil then
-			_condition = theme.components.accordion.animation.duration
+		_attributes_1.open = table.find(openValues, _value) ~= nil
+		local _condition_1 = props.animationDuration
+		if _condition_1 == nil then
+			_condition_1 = theme.components.accordion.animation.duration
 		end
-		_attributes.duration = _condition
-		_attributes.onActivate = function()
+		_attributes_1.duration = _condition_1
+		_attributes_1.onActivate = function()
 			return activate(item)
 		end
-		return React.createElement(RenderedAccordionItem, _attributes)
+		return React.createElement(RenderedAccordionItem, _attributes_1)
 	end
 	for _k, _v in items do
 		_newValue_2[_k] = _callback_2(_v, _k - 1, items)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(Container, {
-		ref = ref,
-		width = "100%",
-		height = "100%",
-		ClipsDescendants = true,
-	}, _exp, _exp_1, React.createElement(VStack, {
+	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(VStack, {
 		Padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.scale, theme.components.accordion.spacing)),
 	}, _newValue_2))
 end)

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

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { ResponsiveGridSpan } from "../../Interfaces/";
 interface ColumnProps {
     span?: ResponsiveGridSpan | number | `${number}`;
+    name?: string;
 }
 export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Column.luau

@@ -28,12 +28,17 @@ local Column = React.forwardRef(function(props, ref)
 	local padding = context.padding
 	local widthScale = fraction + ((fraction - 1) * padding.Scale)
 	local widthOffset = (fraction - 1) * padding.Offset
-	return React.createElement("frame", {
-		ref = ref,
-		Size = UDim2.new(widthScale, widthOffset, 0, 0),
-		AutomaticSize = Enum.AutomaticSize.Y,
-		BackgroundTransparency = 1,
-	}, props.children)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Column"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Size = UDim2.new(widthScale, widthOffset, 0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = 1
+	return React.createElement("frame", _attributes, props.children)
 end)
 return {
 	Column = Column,

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

@@ -4,5 +4,6 @@ import { CssBackgroundImage } from "../../Theme";
 export interface ContainerProps extends SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<ImageLabel> {
     group?: boolean;
     backgroundImage?: Partial<CssBackgroundImage>;
+    name?: string;
 }
 export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Layout/Container.luau

@@ -13,20 +13,24 @@ local Container = React.forwardRef(function(props, ref)
 	local isAutoSizeActive = autoSize ~= Enum.AutomaticSize.None and autoSize ~= "None"
 	local centerViaLayout = props.center == true and props.Position == nil and props.AnchorPoint == nil and isAutoSizeActive
 	local backgroundImage = CssHelper:resolveBackgroundImage(props.backgroundImage)
-	local _attributes = {
-		ref = ref,
-		Archivable = props.Archivable,
-		Tag = props.Tag,
-		Active = props.Active,
-		AnchorPoint = if centerViaLayout then Vector2.zero else SizeHelper:GetAnchor(props),
-		AutomaticSize = autoSize,
-		BackgroundColor3 = props.BackgroundColor3,
-	}
-	local _condition = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition = props.name
 	if _condition == nil then
-		_condition = 1
+		_condition = "Container"
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Archivable = props.Archivable
+	_attributes.Tag = props.Tag
+	_attributes.Active = props.Active
+	_attributes.AnchorPoint = if centerViaLayout then Vector2.zero else SizeHelper:GetAnchor(props)
+	_attributes.AutomaticSize = autoSize
+	_attributes.BackgroundColor3 = props.BackgroundColor3
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
 	_attributes.BorderSizePixel = props.BorderSizePixel
@@ -53,11 +57,11 @@ local Container = React.forwardRef(function(props, ref)
 				_result_1 = _result_1.X
 			end
 		end
-		local _condition_1 = _result_1
-		if _condition_1 == nil then
-			_condition_1 = 0
+		local _condition_2 = _result_1
+		if _condition_2 == nil then
+			_condition_2 = 0
 		end
-		_result = _condition_1
+		_result = _condition_2
 	else
 		_result = 0
 	end
@@ -83,11 +87,13 @@ local Container = React.forwardRef(function(props, ref)
 		return content
 	end
 	return React.createElement("frame", {
+		key = if props.name ~= nil then `{props.name}CenterWrapper` else "ContainerCenterWrapper",
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
 		ZIndex = props.ZIndex,
 		LayoutOrder = props.LayoutOrder,
 	}, React.createElement("uilistlayout", {
+		key = "CenterLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/Components/Layout/Draggable.luau

@@ -13,6 +13,23 @@ local OverlayConsumer = _Contexts.OverlayConsumer
 local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
 local Corners = TS.import(script, script.Parent.Parent, "Decorator").Corners
 local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Helpers").CustomInputService
+local function isInteractiveDescendantAtInput(handle, input)
+	local point = Vector2.new(input.Position.X, input.Position.Y)
+	local _exp = GuiHelper:getGuiObjectsAtPosition(handle, point)
+	-- ▼ ReadonlyArray.some ▼
+	local _result = false
+	local _callback = function(guiObject)
+		return guiObject ~= handle and guiObject:IsDescendantOf(handle) and (guiObject:IsA("GuiButton") or guiObject:IsA("TextBox"))
+	end
+	for _k, _v in _exp do
+		if _callback(_v, _k - 1, _exp) then
+			_result = true
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.some ▲
+	return _result
+end
 local function DragHandle(_param)
 	local children = _param.children
 	local draggable = React.useContext(DraggableContext)
@@ -53,7 +70,7 @@ local function DragHandle(_param)
 				_result(instance, input)
 			end
 		end
-		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
+		if (input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch) and not isInteractiveDescendantAtInput(instance, input) then
 			draggable.beginDrag(input, instance)
 		end
 	end
@@ -62,11 +79,16 @@ local function DragHandle(_param)
 end
 local function Placeholder(props)
 	local theme = React.useContext(CleanThemeContext)
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "DraggablePlaceholder",
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
 	_attributes.BackgroundTransparency = theme.components.draggable.placeholder.backgroundTransparency
 	_attributes.BackgroundColor3 = theme.components.draggable.placeholder.backgroundColor
 	return React.createElement("frame", _attributes, React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = theme.components.draggable.placeholder.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.draggable.placeholder.borderColor,

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

@@ -10,6 +10,7 @@ interface FieldsetProps extends BreakPointElementProps {
     disabled?: boolean;
     checkbox?: boolean;
     wrap?: Breakpoint;
+    name?: string;
 }
 interface FieldsetSlotProps {
     children?: React.ReactNode;

package/out/Components/Layout/Fieldset.luau

@@ -16,6 +16,7 @@ local function FieldsetLabel(props)
 		ShrinkRatio = 0,
 		GrowRatio = 0,
 	}, React.createElement("imagebutton", {
+		key = "FieldsetLabelButton",
 		Size = UDim2.fromOffset(0, 0),
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
@@ -65,16 +66,21 @@ local Fieldset = React.forwardRef(function(props, ref)
 	local breakpoints = props.breakpoints or theme.breakpoints
 	local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
 	local wrap = BreakpointHelper:compare(breakpoint, "<=", props.wrap or "lg")
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Fieldset"
+	end
+	_attributes.name = _condition
+	_attributes.ref = ref
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			setWidth(instance.AbsoluteSize.X)
+		end,
+	}
 	return React.createElement(FieldsetContext.Provider, {
 		value = fieldsetContext,
-	}, React.createElement(Container, {
-		ref = ref,
-		Change = {
-			AbsoluteSize = function(instance)
-				setWidth(instance.AbsoluteSize.X)
-			end,
-		},
-	}, React.createElement(HStack, {
+	}, React.createElement(Container, _attributes, React.createElement(HStack, {
 		Wraps = wrap,
 		valign = "Center",
 		HorizontalFlex = Enum.UIFlexAlignment.Fill,

package/out/Components/Layout/FlexItem.luau

@@ -6,11 +6,18 @@ local FlexItem = React.forwardRef(function(props, ref)
 	local _attributes = table.clone(props)
 	setmetatable(_attributes, nil)
 	_attributes.ref = ref
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "FlexItem"
+	end
+	_attributes.name = _condition
 	return React.createElement(Container, _attributes, React.createElement("uiflexitem", {
+		key = "FlexItemConstraint",
 		FlexMode = props.mode or "Grow",
 		GrowRatio = props.GrowRatio,
 		ShrinkRatio = props.ShrinkRatio,
 	}), React.createElement("uilistlayout", {
+		key = "FlexItemLayout",
 		HorizontalFlex = props.HorizontalFlex,
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = props.align,

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

@@ -11,6 +11,7 @@ interface GroupElementProps {
     enabled?: boolean;
     padding?: ResolvedPadding;
     children?: React.ReactNode;
+    name?: string;
 }
 declare function GroupElement(props: GroupElementProps): boolean | ReadonlyMap<React.Key, React.ReactNode> | {
     readonly [key: string]: React.ReactNode;

package/out/Components/Layout/Group.luau

@@ -71,15 +71,20 @@ local function GroupElement(props)
 		_condition_4 = 0
 	end
 	local verticalPadding = _condition_3 + _condition_4
-	return React.createElement("frame", {
-		BackgroundTransparency = 1,
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Change = {
-			AbsoluteSize = function(instance)
-				context.reportSize(id, Vector2.new(instance.AbsoluteSize.X + horizontalPadding, instance.AbsoluteSize.Y + verticalPadding))
-			end,
-		},
-	}, props.children)
+	local _attributes = {}
+	local _condition_5 = props.name
+	if _condition_5 == nil then
+		_condition_5 = "GroupElement"
+	end
+	_attributes.key = _condition_5
+	_attributes.BackgroundTransparency = 1
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			context.reportSize(id, Vector2.new(instance.AbsoluteSize.X + horizontalPadding, instance.AbsoluteSize.Y + verticalPadding))
+		end,
+	}
+	return React.createElement("frame", _attributes, props.children)
 end
 local function getMaxVector2(map)
 	local max