@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Layout/Table.luau

@@ -0,0 +1,342 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local SizeHelper = _Helpers.SizeHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Padding = _Decorator.Padding
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local Container = TS.import(script, script.Parent, "Container").Container
+local HStack = TS.import(script, script.Parent, "HStack").HStack
+local VStack = TS.import(script, script.Parent, "VStack").VStack
+local TableSectionContext = React.createContext(nil)
+local TableScaleContext = React.createContext(nil)
+local TableLayoutContext = React.createContext(nil)
+local TableColumnContext = React.createContext(0)
+local nextTableCellId = 0
+local function TableHeader(props)
+	local theme = React.useContext(CleanThemeContext)
+	local layout = React.useContext(TableLayoutContext)
+	local _result = layout
+	if _result ~= nil then
+		_result = _result.autoWidth
+	end
+	local autoSectionWidth = if _result == true then layout.totalWidth else nil
+	return React.createElement(TableSectionContext.Provider, {
+		value = "header",
+	}, React.createElement(Container, {
+		name = "TableHeader",
+		Size = if autoSectionWidth ~= nil then UDim2.fromOffset(autoSectionWidth, 0) else nil,
+		width = if autoSectionWidth == nil then "100%" else nil,
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundColor3 = theme.components.table.header.backgroundColor,
+		BackgroundTransparency = theme.components.table.header.backgroundTransparency,
+	}, React.createElement("uicorner", {
+		key = "Corners",
+		TopLeftRadius = SizeHelper:toUDim(theme.components.table.cornerRadius),
+		TopRightRadius = SizeHelper:toUDim(theme.components.table.cornerRadius),
+		BottomLeftRadius = UDim.new(0, 0),
+		BottomRightRadius = UDim.new(0, 0),
+	}), React.createElement(VStack, {
+		spacing = "None",
+	}, props.children)))
+end
+local function TableBody(props)
+	local layout = React.useContext(TableLayoutContext)
+	local _result = layout
+	if _result ~= nil then
+		_result = _result.autoWidth
+	end
+	local autoSectionWidth = if _result == true then layout.totalWidth else nil
+	return React.createElement(TableSectionContext.Provider, {
+		value = "body",
+	}, React.createElement(Container, {
+		name = "TableBody",
+		Size = if autoSectionWidth ~= nil then UDim2.fromOffset(autoSectionWidth, 0) else nil,
+		width = if autoSectionWidth == nil then "100%" else nil,
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, React.createElement(VStack, {
+		spacing = "None",
+	}, props.children)))
+end
+local TableHead, TableCell
+local function TableRow(props)
+	local theme = React.useContext(CleanThemeContext)
+	local section = React.useContext(TableSectionContext)
+	local layout = React.useContext(TableLayoutContext)
+	local columnIndex = 0
+	local children = React.Children.map(props.children, function(child)
+		if not React.isValidElement(child) or (child.type ~= TableHead and child.type ~= TableCell) then
+			return child
+		end
+		local _original = columnIndex
+		columnIndex += 1
+		local currentColumnIndex = _original
+		return React.createElement(TableColumnContext.Provider, {
+			value = currentColumnIndex,
+		}, child)
+	end)
+	local _result = layout
+	if _result ~= nil then
+		_result = _result.autoWidth
+	end
+	local autoRowWidth = if _result == true then layout.totalWidth else nil
+	local _condition = section == "body"
+	if _condition then
+		local _attributes = {
+			key = "Divider",
+			BackgroundColor3 = theme.components.table.rowDividerColor,
+			BorderSizePixel = 0,
+		}
+		local _exp = UDim2.fromOffset(0, theme.components.table.rowDividerThickness)
+		local _arg0 = UDim2.fromScale(1, 0)
+		_attributes.Size = _exp + _arg0
+		_condition = (React.createElement("frame", _attributes))
+	end
+	return React.createElement(Container, {
+		name = "TableRow",
+		Size = if autoRowWidth ~= nil then UDim2.fromOffset(autoRowWidth, 0) else nil,
+		width = if autoRowWidth == nil then "100%" else nil,
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, _condition, React.createElement(Container, {
+		name = "TableRowContent",
+		width = "100%",
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, React.createElement(HStack, {
+		Padding = UDim.new(0, 0),
+		Wraps = false,
+	}, children)))
+end
+local function TableCellContent(props)
+	local theme = React.useContext(CleanThemeContext)
+	local tableScale = React.useContext(TableScaleContext)
+	local layout = React.useContext(TableLayoutContext)
+	local _original = nextTableCellId
+	nextTableCellId += 1
+	local id = React.useRef(_original).current
+	local measurementRef = React.useRef()
+	local typography = if props.header then TypographyHelper:getTypography(theme, tableScale, theme.components.table.header.typography) else TypographyHelper:getTypography(theme, tableScale, theme.components.table.cell.typography)
+	local _condition = props.text
+	if _condition == nil then
+		_condition = props.children
+	end
+	local content = _condition
+	local columnIndex = React.useContext(TableColumnContext)
+	local _result = layout
+	if _result ~= nil then
+		_result = _result.columnWidths[columnIndex]
+	end
+	local _condition_1 = _result
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local columnWidth = _condition_1
+	local _result_1 = layout
+	if _result_1 ~= nil then
+		_result_1 = _result_1.autoWidth
+	end
+	local _condition_2 = _result_1 == false
+	if _condition_2 then
+		_condition_2 = layout.totalWidth > 0
+	end
+	local cellWidth = if _condition_2 then UDim.new(columnWidth / layout.totalWidth, 0) else UDim.new(0, columnWidth)
+	local _exp = function(instance)
+		local _result_2 = layout
+		if _result_2 ~= nil then
+			_result_2 = _result_2.reportWidth(id, columnIndex, instance.AbsoluteSize.X)
+		end
+		return _result_2
+	end
+	local _result_2 = layout
+	if _result_2 ~= nil then
+		_result_2 = _result_2.reportWidth
+	end
+	local reportMeasurement = React.useCallback(_exp, { _result_2, id, columnIndex })
+	local _exp_1 = function()
+		return function()
+			local _result_3 = layout
+			if _result_3 ~= nil then
+				_result_3 = _result_3.removeWidth(id)
+			end
+			return _result_3
+		end
+	end
+	local _result_3 = layout
+	if _result_3 ~= nil then
+		_result_3 = _result_3.removeWidth
+	end
+	React.useEffect(_exp_1, { _result_3 })
+	React.useEffect(function()
+		local mounted = true
+		local reportMountedMeasurement = function()
+			local instance = measurementRef.current
+			if mounted and instance ~= nil then
+				reportMeasurement(instance)
+			end
+		end
+		reportMountedMeasurement()
+		task.defer(reportMountedMeasurement)
+		return function()
+			mounted = false
+		end
+	end, { reportMeasurement })
+	local _exp_2 = React.createElement("uilistlayout", {
+		key = "TableCellLayout",
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = props.align or "Left",
+	})
+	local _attributes = {}
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	_object.spacing = props.spacing or tableScale
+	_attributes.resolvedPadding = SpacingHelper:GetResolvedPadding(theme, _object, theme.components.table.cell.spacing, theme.components.table.cell.padding)
+	return React.createElement(Container, {
+		name = if props.header then "TableHead" else "TableCell",
+		Size = UDim2.new(cellWidth, UDim.new(0, 0)),
+		AutomaticSize = Enum.AutomaticSize.Y,
+	}, _exp_2, React.createElement("frame", {
+		key = "TableCellMeasurement",
+		ref = measurementRef,
+		Size = UDim2.fromOffset(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+		Change = {
+			AbsoluteSize = reportMeasurement,
+		},
+	}, React.createElement(Padding, _attributes), if type(content) == "string" then React.createElement(Text, {
+		text = content,
+		typography = typography,
+		TextWrap = false,
+	}) else content))
+end
+function TableHead(props)
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	_object.header = true
+	return TableCellContent(_object)
+end
+function TableCell(props)
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	_object.header = false
+	return TableCellContent(_object)
+end
+local Table = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local measurements, setMeasurements = React.useState({})
+	local autoWidth = props.Size == nil and props.width == nil
+	local reportWidth = React.useCallback(function(id, columnIndex, width)
+		setMeasurements(function(current)
+			local _current = current
+			local _id = id
+			local previous = _current[_id]
+			local _result = previous
+			if _result ~= nil then
+				_result = _result.columnIndex
+			end
+			local _condition = _result == columnIndex
+			if _condition then
+				_condition = previous.width == width
+			end
+			if _condition then
+				return current
+			end
+			local updated = {}
+			for currentId, measurement in current do
+				updated[currentId] = measurement
+			end
+			local _id_1 = id
+			local _arg1 = {
+				columnIndex = columnIndex,
+				width = width,
+			}
+			updated[_id_1] = _arg1
+			return updated
+		end)
+	end, {})
+	local removeWidth = React.useCallback(function(id)
+		setMeasurements(function(current)
+			local _current = current
+			local _id = id
+			if not (_current[_id] ~= nil) then
+				return current
+			end
+			local updated = {}
+			for currentId, measurement in current do
+				updated[currentId] = measurement
+			end
+			local _id_1 = id
+			updated[_id_1] = nil
+			return updated
+		end)
+	end, {})
+	local columnWidths = React.useMemo(function()
+		local widths = {}
+		for _, measurement in measurements do
+			local _exp = measurement.columnIndex
+			local _columnIndex = measurement.columnIndex
+			local _condition = widths[_columnIndex]
+			if _condition == nil then
+				_condition = 0
+			end
+			local _arg1 = math.max(_condition, measurement.width)
+			widths[_exp] = _arg1
+		end
+		return widths
+	end, { measurements })
+	local totalWidth = 0
+	for _, width in columnWidths do
+		totalWidth += width
+	end
+	local layout = React.useMemo(function()
+		return {
+			autoWidth = autoWidth,
+			columnWidths = columnWidths,
+			totalWidth = totalWidth,
+			reportWidth = reportWidth,
+			removeWidth = removeWidth,
+		}
+	end, { autoWidth, columnWidths, totalWidth, reportWidth, removeWidth })
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Table"
+	end
+	_attributes.name = _condition
+	_attributes.Size = props.Size
+	_attributes.width = props.width
+	_attributes.height = props.height
+	_attributes.AutomaticSize = props.AutomaticSize
+	_attributes.BackgroundColor3 = theme.components.table.backgroundColor
+	_attributes.BackgroundTransparency = theme.components.table.backgroundTransparency
+	_attributes.ClipsDescendants = true
+	return React.createElement(TableScaleContext.Provider, {
+		value = props.scale,
+	}, React.createElement(TableLayoutContext.Provider, {
+		value = layout,
+	}, React.createElement(Container, _attributes, React.createElement(Corners, {
+		radius = theme.components.table.cornerRadius,
+	}), React.createElement("uistroke", {
+		key = "Stroke",
+		Color = theme.components.table.borderColor,
+		Thickness = theme.components.table.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Outer,
+	}), React.createElement(VStack, {
+		spacing = "None",
+		HorizontalFlex = if autoWidth then Enum.UIFlexAlignment.None else Enum.UIFlexAlignment.Fill,
+	}, props.children))))
+end)
+Table.Header = TableHeader
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Head = TableHead
+Table.Cell = TableCell
+return {
+	Table = Table,
+}

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

@@ -1,23 +1,33 @@
 import React from "@rbxts/react";
-import { PaddingProps, ScalableElementProps } from "../../Interfaces";
+import { CssBackgroundGradient, PaddingProps, ScalableElementProps } from "../../Interfaces";
 import { CssBackgroundImage } from "../../Theme";
-interface TabProps {
-    children?: React.ReactNode;
-}
-declare function Tab(_props: TabProps): undefined;
 interface TabTitleProps extends PaddingProps {
+    value: string;
     text: string;
 }
-declare function TabTitle(_props: TabTitleProps): undefined;
+declare function TabTitle(props: TabTitleProps): React.JSX.Element;
 interface TabContentProps {
+    value: string;
+    children?: React.ReactNode;
+}
+declare function TabContent(props: TabContentProps): React.JSX.Element;
+interface TabsListProps extends ScalableElementProps {
     children?: React.ReactNode;
 }
-declare function TabContent(props: TabContentProps): undefined;
-interface TabsProps extends ScalableElementProps {
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<ImageLabel>>;
+interface TabsBodyProps extends ScalableElementProps {
     backgroundImage?: CssBackgroundImage;
+    backgroundGradient?: CssBackgroundGradient;
+    children?: React.ReactNode;
+}
+declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.RefAttributes<ImageLabel>>;
+export interface TabsProps {
+    children?: React.ReactNode;
+    defaultValue?: string;
 }
-type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<ImageLabel>> & {
-    Tab: typeof Tab;
+type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<Frame>> & {
+    List: typeof TabsList;
+    Body: typeof TabsBody;
     Title: typeof TabTitle;
     Content: typeof TabContent;
 };

package/out/Components/Layout/Tabs.luau

@@ -9,6 +9,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local BoxShadow = _Decorator.BoxShadow
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
@@ -18,15 +19,10 @@ local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
 local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
-local function Tab(_props)
-	return nil
-end
-local function TabTitle(_props)
-	return nil
-end
-local function TabContent(props)
-	return nil
-end
+local TabsContext = React.createContext({
+	selected = nil,
+	setSelected = function() end,
+})
 local function TabButtonContent(props)
 	local theme = React.useContext(CleanThemeContext)
 	local hover = React.useContext(HoverButtonContext)
@@ -52,57 +48,95 @@ local function TabButtonContent(props)
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
 	}), React.createElement(Text, {
+		name = "TabTitleText",
 		TextColor3 = intent.textColor,
 		text = props.text,
 		typography = TypographyHelper:getTypography(theme, nil, intent.typography),
 	}))
 end
-local Tabs = React.forwardRef(function(props, ref)
+local function TabTitle(props)
 	local theme = React.useContext(CleanThemeContext)
-	local selected, setSelected = React.useState(0)
-	local tabs = React.useMemo(function()
-		local tabs = {}
-		React.Children.forEach(props.children, function(child)
-			if not React.isValidElement(child) or child.type ~= Tab then
-				return nil
-			end
-			local title
-			local content
-			local tab = child
-			React.Children.forEach(tab.props.children, function(tabChild)
-				if not React.isValidElement(tabChild) then
-					return nil
-				end
-				if tabChild.type == TabTitle then
-					title = (tabChild.props)
-				elseif tabChild.type == TabContent then
-					content = (tabChild.props).children
-				end
-			end)
-			if title ~= nil then
-				local _arg0 = {
-					title = title,
-					content = content,
-				}
-				table.insert(tabs, _arg0)
+	local _binding = React.useContext(TabsContext)
+	local selected = _binding.selected
+	local setSelected = _binding.setSelected
+	local isSelected = selected == props.value
+	React.useEffect(function()
+		setSelected(function(current)
+			local _condition = current
+			if _condition == nil then
+				_condition = props.value
 			end
+			return _condition
 		end)
-		return tabs
-	end, { props.children })
-	local tabCount = #tabs
-	React.useEffect(function()
-		if selected >= tabCount then
-			setSelected(math.max(0, tabCount - 1))
-		end
-	end, { selected, tabCount })
-	local selectedTab = tabs[selected + 1]
+	end, {})
 	local buttonDefault = ColorHelper:getIntentColors(theme, "primary", "default", theme.components.tabs.button.intents)
 	local buttonHover = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.tabs.button.intents)
 	local buttonFocus = ColorHelper:getIntentColors(theme, "primary", "focus", theme.components.tabs.button.intents)
 	local buttonDefaultBackgroundImage = CssHelper:resolveBackgroundImage(buttonDefault.backgroundImage)
 	local buttonHoverBackgroundImage = CssHelper:resolveBackgroundImage(buttonHover.backgroundImage)
 	local buttonFocusBackgroundImage = CssHelper:resolveBackgroundImage(buttonFocus.backgroundImage)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HoverButton, {
+		isSelected = isSelected,
+		name = `TabButton-{props.value}`,
+		default = {
+			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundColor3 = buttonDefault.backgroundColor,
+			BackgroundTransparency = buttonDefault.backgroundTransparency,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Image = buttonDefaultBackgroundImage.Image,
+			ImageColor3 = buttonDefaultBackgroundImage.ImageColor3,
+			ImageTransparency = buttonDefaultBackgroundImage.ImageTransparency,
+			ScaleType = buttonDefaultBackgroundImage.ScaleType,
+			SliceCenter = buttonDefaultBackgroundImage.SliceCenter,
+			SliceScale = buttonDefaultBackgroundImage.SliceScale,
+			TileSize = buttonDefaultBackgroundImage.TileSize,
+			Event = {
+				Activated = function()
+					setSelected(props.value)
+				end,
+			},
+		},
+		hover = {
+			BackgroundColor3 = buttonHover.backgroundColor,
+			BackgroundTransparency = buttonHover.backgroundTransparency,
+			Image = buttonHoverBackgroundImage.Image,
+			ImageColor3 = buttonHoverBackgroundImage.ImageColor3,
+			ImageTransparency = buttonHoverBackgroundImage.ImageTransparency,
+			ScaleType = buttonHoverBackgroundImage.ScaleType,
+			SliceCenter = buttonHoverBackgroundImage.SliceCenter,
+			SliceScale = buttonHoverBackgroundImage.SliceScale,
+			TileSize = buttonHoverBackgroundImage.TileSize,
+		},
+		focus = {
+			BackgroundColor3 = buttonFocus.backgroundColor,
+			BackgroundTransparency = buttonFocus.backgroundTransparency,
+			Image = buttonFocusBackgroundImage.Image,
+			ImageColor3 = buttonFocusBackgroundImage.ImageColor3,
+			ImageTransparency = buttonFocusBackgroundImage.ImageTransparency,
+			ScaleType = buttonFocusBackgroundImage.ScaleType,
+			SliceCenter = buttonFocusBackgroundImage.SliceCenter,
+			SliceScale = buttonFocusBackgroundImage.SliceScale,
+			TileSize = buttonFocusBackgroundImage.TileSize,
+		},
+	}, React.createElement(TabButtonContent, _attributes))
+end
+local function TabContent(props)
+	local _binding = React.useContext(TabsContext)
+	local selected = _binding.selected
+	return React.createElement(Container, {
+		name = `TabContent_{props.value}`,
+		width = "100%",
+		Visible = selected == props.value,
+	}, props.children)
+end
+local TabsList = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
+		name = "TabsList",
 		ref = ref,
 		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
 		width = "100%",
@@ -113,89 +147,49 @@ local Tabs = React.forwardRef(function(props, ref)
 	end
 	_attributes.BackgroundTransparency = _condition
 	_attributes.backgroundImage = theme.components.tabs.list.backgroundImage
-	local _exp = React.createElement(Corners, {
+	return React.createElement(Container, _attributes, React.createElement(Corners, {
 		radius = theme.components.tabs.list.cornerRadius,
-	})
-	local _exp_1 = React.createElement(Padding, {
+	}), React.createElement(Gradient, {
+		value = theme.components.tabs.list.backgroundGradient,
+	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
-	})
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#tabs)
-	local _callback = function(tab, index)
-		local _attributes_1 = table.clone(tab.title)
-		setmetatable(_attributes_1, nil)
-		return React.createElement(HoverButton, {
-			isSelected = selected == index,
-			default = {
-				Size = UDim2.fromScale(0, 0),
-				AutomaticSize = Enum.AutomaticSize.XY,
-				BackgroundColor3 = buttonDefault.backgroundColor,
-				BackgroundTransparency = buttonDefault.backgroundTransparency,
-				BorderSizePixel = 0,
-				AutoButtonColor = false,
-				Image = buttonDefaultBackgroundImage.Image,
-				ImageColor3 = buttonDefaultBackgroundImage.ImageColor3,
-				ImageTransparency = buttonDefaultBackgroundImage.ImageTransparency,
-				ScaleType = buttonDefaultBackgroundImage.ScaleType,
-				SliceCenter = buttonDefaultBackgroundImage.SliceCenter,
-				SliceScale = buttonDefaultBackgroundImage.SliceScale,
-				TileSize = buttonDefaultBackgroundImage.TileSize,
-				Event = {
-					Activated = function()
-						setSelected(index)
-					end,
-				},
-			},
-			hover = {
-				BackgroundColor3 = buttonHover.backgroundColor,
-				BackgroundTransparency = buttonHover.backgroundTransparency,
-				Image = buttonHoverBackgroundImage.Image,
-				ImageColor3 = buttonHoverBackgroundImage.ImageColor3,
-				ImageTransparency = buttonHoverBackgroundImage.ImageTransparency,
-				ScaleType = buttonHoverBackgroundImage.ScaleType,
-				SliceCenter = buttonHoverBackgroundImage.SliceCenter,
-				SliceScale = buttonHoverBackgroundImage.SliceScale,
-				TileSize = buttonHoverBackgroundImage.TileSize,
-			},
-			focus = {
-				BackgroundColor3 = buttonFocus.backgroundColor,
-				BackgroundTransparency = buttonFocus.backgroundTransparency,
-				Image = buttonFocusBackgroundImage.Image,
-				ImageColor3 = buttonFocusBackgroundImage.ImageColor3,
-				ImageTransparency = buttonFocusBackgroundImage.ImageTransparency,
-				ScaleType = buttonFocusBackgroundImage.ScaleType,
-				SliceCenter = buttonFocusBackgroundImage.SliceCenter,
-				SliceScale = buttonFocusBackgroundImage.SliceScale,
-				TileSize = buttonFocusBackgroundImage.TileSize,
-			},
-		}, React.createElement(TabButtonContent, _attributes_1))
-	end
-	for _k, _v in tabs do
-		_newValue[_k] = _callback(_v, _k - 1, tabs)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	local _exp_2 = React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
-	local _exp_3 = React.createElement("uistroke", {
+	}), React.createElement(HStack, nil, props.children))
+end)
+local TabsBody = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	return React.createElement(Container, {
+		name = "TabsBody",
+		ref = ref,
+		width = "100%",
+		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
+	}, React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = theme.components.tabs.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.tabs.borderColor,
-	})
-	local _exp_4 = React.createElement(Padding, {
+	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
-	})
-	local _exp_5 = React.createElement(Corners, {
+	}), React.createElement(Corners, {
 		radius = theme.components.tabs.cornerRadius,
-	})
-	local _result = selectedTab
-	if _result ~= nil then
-		_result = _result.content
-	end
-	return React.createElement(VStack, nil, _exp_2, React.createElement(Container, {
-		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
-	}, _exp_3, _exp_4, _exp_5, _result))
+	}), React.createElement(Gradient, {
+		value = props.backgroundGradient or theme.components.tabs.backgroundGradient,
+	}), props.children)
+end)
+local Tabs = React.forwardRef(function(props, _ref)
+	local selected, setSelected = React.useState(props.defaultValue)
+	local contextValue = React.useMemo(function()
+		return {
+			selected = selected,
+			setSelected = setSelected,
+		}
+	end, { selected })
+	return React.createElement(TabsContext.Provider, {
+		value = contextValue,
+	}, React.createElement(VStack, nil, props.children))
 end)
+Tabs.List = TabsList
+Tabs.Body = TabsBody
 Tabs.Title = TabTitle
-Tabs.Tab = Tab
 Tabs.Content = TabContent
 return {
 	Tabs = Tabs,

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

@@ -4,11 +4,14 @@ interface VStackProps extends SpacedElementProps {
     valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
     children?: React.ReactNode;
     HorizontalFlex?: Enum.UIFlexAlignment;
+    HorizontalAlignment?: Enum.HorizontalAlignment;
     VerticalFlex?: Enum.UIFlexAlignment;
     VerticalAlignment?: Enum.VerticalAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
     Padding?: UDim | Binding<UDim>;
+    Wraps?: boolean;
+    name?: string;
 }
 export declare function VStack(props: VStackProps): React.JSX.Element;
 export {};