@rbxts/react-clean-ui 1.2.6 → 1.2.7

package/out/Components/Input/Button.luau

@@ -18,6 +18,35 @@ local HStack = TS.import(script, script.Parent.Parent, "Layout").HStack
 local _ = TS.import(script, script.Parent.Parent, "Layout")
 local Group = _.Group
 local GroupContext = _.GroupContext
+local function resolveOwnIntentTransparency(intent, state, intents)
+	if intent == nil or intent == "primary" then
+		return nil
+	end
+	local _entry = intents
+	if _entry ~= nil then
+		_entry = _entry[intent]
+	end
+	local entry = _entry
+	local _result = entry
+	if _result ~= nil then
+		_result = _result[state]
+		if _result ~= nil then
+			_result = _result.backgroundTransparency
+		end
+	end
+	local _condition = _result
+	if _condition == nil then
+		local _result_1 = entry
+		if _result_1 ~= nil then
+			_result_1 = _result_1.default
+			if _result_1 ~= nil then
+				_result_1 = _result_1.backgroundTransparency
+			end
+		end
+		_condition = _result_1
+	end
+	return _condition
+end
 local function ButtonText(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
@@ -93,12 +122,22 @@ local Button = React.forwardRef(function(props, ref)
 	end
 	local intentColors = ColorHelper:getIntentColors(theme, _exp, state, _exp_1, _result)
 	local backgroundImage = CssHelper:resolveBackgroundImage(intentColors.backgroundImage)
-	local _attributes = {}
-	local _condition = props.name
+	local _exp_2 = props.intent
+	local _result_1 = props.styleOverride
+	if _result_1 ~= nil then
+		_result_1 = _result_1.intents
+	end
+	local _condition = resolveOwnIntentTransparency(_exp_2, state, _result_1)
 	if _condition == nil then
-		_condition = "Button"
+		_condition = resolveOwnIntentTransparency(props.intent, state, theme.components.button.intents)
+	end
+	local intentBackgroundTransparency = _condition
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Button"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.ref = ref
 	_attributes.Active = not props.disabled
 	local _object = {}
@@ -112,11 +151,11 @@ local Button = React.forwardRef(function(props, ref)
 		if not props.disabled then
 			setHover(true)
 		end
-		local _result_1 = props.Event
-		if _result_1 ~= nil then
-			_result_1 = _result_1.MouseEnter
-			if _result_1 ~= nil then
-				_result_1(button, x, y)
+		local _result_2 = props.Event
+		if _result_2 ~= nil then
+			_result_2 = _result_2.MouseEnter
+			if _result_2 ~= nil then
+				_result_2(button, x, y)
 			end
 		end
 	end
@@ -124,11 +163,11 @@ local Button = React.forwardRef(function(props, ref)
 		if not props.disabled then
 			setHover(false)
 		end
-		local _result_1 = props.Event
-		if _result_1 ~= nil then
-			_result_1 = _result_1.MouseLeave
-			if _result_1 ~= nil then
-				_result_1(button, x, y)
+		local _result_2 = props.Event
+		if _result_2 ~= nil then
+			_result_2 = _result_2.MouseLeave
+			if _result_2 ~= nil then
+				_result_2(button, x, y)
 			end
 		end
 	end
@@ -136,46 +175,49 @@ local Button = React.forwardRef(function(props, ref)
 		if props.disabled then
 			return nil
 		end
-		local _result_1 = props.Event
-		if _result_1 ~= nil then
-			_result_1 = _result_1.Activated
-			if _result_1 ~= nil then
-				_result_1(button, inputObject, clickCount)
+		local _result_2 = props.Event
+		if _result_2 ~= nil then
+			_result_2 = _result_2.Activated
+			if _result_2 ~= nil then
+				_result_2(button, inputObject, clickCount)
 			end
 		end
 	end
 	_attributes.Event = _object
-	local _result_1
+	local _result_2
 	if props.group then
-		local _result_2 = group
-		if _result_2 ~= nil then
-			_result_2 = _result_2.size
-			if _result_2 ~= nil then
-				_result_2 = _result_2.X
+		local _result_3 = group
+		if _result_3 ~= nil then
+			_result_3 = _result_3.size
+			if _result_3 ~= nil then
+				_result_3 = _result_3.X
 			end
 		end
-		local _condition_1 = _result_2
-		if _condition_1 == nil then
-			_condition_1 = 0
+		local _condition_2 = _result_3
+		if _condition_2 == nil then
+			_condition_2 = 0
 		end
-		_result_1 = _condition_1
+		_result_2 = _condition_2
 	else
-		_result_1 = 0
+		_result_2 = 0
 	end
-	_attributes.Size = UDim2.fromOffset(_result_1, 0)
+	_attributes.Size = UDim2.fromOffset(_result_2, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
-	local _condition_1 = props.BackgroundTransparency
-	if _condition_1 == nil then
-		local _result_2 = props.styleOverride
-		if _result_2 ~= nil then
-			_result_2 = _result_2.backgroundTransparency
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		local _result_3 = props.styleOverride
+		if _result_3 ~= nil then
+			_result_3 = _result_3.backgroundTransparency
 		end
-		_condition_1 = _result_2
-		if _condition_1 == nil then
-			_condition_1 = theme.components.button.backgroundTransparency
+		_condition_2 = _result_3
+		if _condition_2 == nil then
+			_condition_2 = intentBackgroundTransparency
+			if _condition_2 == nil then
+				_condition_2 = theme.components.button.backgroundTransparency
+			end
 		end
 	end
-	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BackgroundTransparency = _condition_2
 	_attributes.BackgroundColor3 = intentColors.backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -188,49 +230,52 @@ local Button = React.forwardRef(function(props, ref)
 	_attributes.SliceScale = backgroundImage.SliceScale
 	_attributes.TileSize = backgroundImage.TileSize
 	local _attributes_1 = {}
-	local _result_2 = props.styleOverride
-	if _result_2 ~= nil then
-		_result_2 = _result_2.cornerRadius
-	end
-	local _condition_2 = _result_2
-	if _condition_2 == nil then
-		_condition_2 = theme.components.button.cornerRadius
-	end
-	_attributes_1.radius = _condition_2
-	local _exp_2 = React.createElement(Corners, _attributes_1)
-	local _attributes_2 = {
-		key = "Stroke",
-	}
 	local _result_3 = props.styleOverride
 	if _result_3 ~= nil then
-		_result_3 = _result_3.borderThickness
+		_result_3 = _result_3.cornerRadius
 	end
 	local _condition_3 = _result_3
 	if _condition_3 == nil then
-		_condition_3 = theme.components.button.borderThickness
+		_condition_3 = theme.components.button.cornerRadius
 	end
-	_attributes_2.Thickness = _condition_3
+	_attributes_1.radius = _condition_3
+	local _exp_3 = React.createElement(Corners, _attributes_1)
+	local _attributes_2 = {
+		key = "Stroke",
+	}
+	local _condition_4 = intentColors.borderThickness
+	if _condition_4 == nil then
+		local _result_4 = props.styleOverride
+		if _result_4 ~= nil then
+			_result_4 = _result_4.borderThickness
+		end
+		_condition_4 = _result_4
+		if _condition_4 == nil then
+			_condition_4 = theme.components.button.borderThickness
+		end
+	end
+	_attributes_2.Thickness = _condition_4
 	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	_attributes_2.Color = intentColors.borderColor
-	local _exp_3 = React.createElement("uistroke", _attributes_2)
+	local _exp_4 = React.createElement("uistroke", _attributes_2)
 	local _attributes_3 = table.clone(props)
 	setmetatable(_attributes_3, nil)
 	local _result_4 = props.styleOverride
 	if _result_4 ~= nil then
 		_result_4 = _result_4.boxShadow
 	end
-	local _condition_4 = _result_4
-	if _condition_4 == nil then
-		_condition_4 = theme.components.button.boxShadow
+	local _condition_5 = _result_4
+	if _condition_5 == nil then
+		_condition_5 = theme.components.button.boxShadow
 	end
-	_attributes_3.value = _condition_4
-	local _exp_4 = React.createElement(BoxShadow, _attributes_3)
-	local _exp_5 = React.createElement(Gradient, {
+	_attributes_3.value = _condition_5
+	local _exp_5 = React.createElement(BoxShadow, _attributes_3)
+	local _exp_6 = React.createElement(Gradient, {
 		value = intentColors.backgroundGradient,
 	})
 	local _attributes_4 = table.clone(props)
 	setmetatable(_attributes_4, nil)
-	return React.createElement("imagebutton", _attributes, _exp_2, _exp_3, _exp_4, _exp_5, React.createElement(Padding, _attributes_4), React.createElement(Group.Element, {
+	return React.createElement("imagebutton", _attributes, _exp_3, _exp_4, _exp_5, _exp_6, React.createElement(Padding, _attributes_4), React.createElement(Group.Element, {
 		enabled = props.group,
 		padding = padding,
 	}, (props.icon ~= nil or props.text ~= nil) and React.createElement(HStack, {

package/out/Components/Input/Input.luau

@@ -56,7 +56,12 @@ local function Input(props)
 	_attributes.key = _condition
 	_attributes.Size = props.Size or UDim2.fromScale(1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
-	_attributes.BackgroundTransparency = 1
+	_attributes.BackgroundColor3 = theme.components.input.backgroundColor
+	local _condition_1 = theme.components.input.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.AnchorPoint = props.AnchorPoint
 	_attributes.Position = props.Position
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -99,21 +104,21 @@ local function Input(props)
 		FontFace = Font.fromName(typography.font.Name, typography.weight or Enum.FontWeight.Regular),
 		FontSize = typography.size,
 	}
-	local _condition_1 = props.PlaceholderText
-	if _condition_1 == nil then
-		_condition_1 = props.placeholder
+	local _condition_2 = props.PlaceholderText
+	if _condition_2 == nil then
+		_condition_2 = props.placeholder
 	end
-	_attributes_2.PlaceholderText = _condition_1
+	_attributes_2.PlaceholderText = _condition_2
 	_attributes_2.PlaceholderColor3 = props.PlaceholderColor3 or placeholderTypography.color
 	_attributes_2.TextScaled = props.TextScaled
 	_attributes_2.LineHeight = typography.lineHeight
 	_attributes_2.Text = if props.controlled then props.value else value
 	_attributes_2.TextColor3 = props.TextColor3 or typography.color or theme.colors.intents.primary.default.textColor
-	local _condition_2 = props.TextTransparency
-	if _condition_2 == nil then
-		_condition_2 = typography.transparency
+	local _condition_3 = props.TextTransparency
+	if _condition_3 == nil then
+		_condition_3 = typography.transparency
 	end
-	_attributes_2.TextTransparency = _condition_2
+	_attributes_2.TextTransparency = _condition_3
 	_attributes_2.Active = props.Active
 	_attributes_2.Archivable = props.Archivable
 	_attributes_2.BorderColor3 = props.BorderColor3
@@ -133,11 +138,11 @@ local function Input(props)
 	_attributes_2.NextSelectionUp = props.NextSelectionUp
 	_attributes_2.SelectionGroup = props.SelectionGroup
 	_attributes_2.SelectionOrder = props.SelectionOrder
-	local _condition_3 = props.ClearTextOnFocus
-	if _condition_3 == nil then
-		_condition_3 = false
+	local _condition_4 = props.ClearTextOnFocus
+	if _condition_4 == nil then
+		_condition_4 = false
 	end
-	_attributes_2.ClearTextOnFocus = _condition_3
+	_attributes_2.ClearTextOnFocus = _condition_4
 	_attributes_2.CursorPosition = props.CursorPosition
 	_attributes_2.MultiLine = props.MultiLine
 	_attributes_2.SelectionStart = props.SelectionStart

package/out/Components/Input/Select.luau

@@ -417,37 +417,51 @@ local Select = React.forwardRef(function(props, ref)
 		_result_1 = _result_1.labelActivated
 	end
 	React.useEffect(_exp, { _result_1, activateSelect })
+	local _condition_3 = theme.components.select.backgroundTransparency
+	if _condition_3 == nil then
+		_condition_3 = 1
+	end
+	local themeBackgroundTransparency = _condition_3
 	if open and overlay.overlay == nil then
 		warn("You have used a Select component without using the Overlay Provider")
 	end
 	local _attributes = {}
-	local _condition_3 = props.name
-	if _condition_3 == nil then
-		_condition_3 = "Select"
+	local _condition_4 = props.name
+	if _condition_4 == nil then
+		_condition_4 = "Select"
 	end
-	_attributes.name = _condition_3
+	_attributes.name = _condition_4
 	_attributes.ref = ref
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
 	_attributes.Size = UDim2.fromScale(1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundColor3 = props.BackgroundColor3 or theme.components.select.backgroundColor
+	local _condition_5 = props.BackgroundTransparency
+	if _condition_5 == nil then
+		_condition_5 = themeBackgroundTransparency
+	end
+	_attributes.BackgroundTransparency = _condition_5
 	_attributes.backgroundImage = props.backgroundImage or theme.components.select.backgroundImage
-	local _exp_1 = React.createElement(Gradient, {
+	local _exp_1 = themeBackgroundTransparency < 1 and React.createElement(Corners, {
+		radius = theme.components.select.cornerRadius,
+	})
+	local _exp_2 = React.createElement(Gradient, {
 		value = props.backgroundGradient or theme.components.select.backgroundGradient,
 	})
-	local _exp_2 = React.createElement("uistroke", {
+	local _exp_3 = React.createElement("uistroke", {
 		key = "Stroke",
 		Thickness = theme.components.select.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.select.borderColor,
 	})
-	local _exp_3 = React.createElement(Corners, {
+	local _exp_4 = React.createElement(Corners, {
 		radius = theme.components.select.cornerRadius,
 	})
 	local _attributes_1 = table.clone(props)
 	setmetatable(_attributes_1, nil)
-	local _exp_4 = React.createElement(Padding, _attributes_1)
+	local _exp_5 = React.createElement(Padding, _attributes_1)
 	local _attributes_2 = {
 		name = "SelectedText",
 	}
@@ -455,19 +469,20 @@ local Select = React.forwardRef(function(props, ref)
 	if _result_2 ~= nil then
 		_result_2 = _result_2.props.text
 	end
-	local _condition_4 = _result_2
-	if _condition_4 == nil then
-		_condition_4 = "No Options"
+	local _condition_6 = _result_2
+	if _condition_6 == nil then
+		_condition_6 = "No Options"
 	end
-	_attributes_2.text = _condition_4
+	_attributes_2.text = _condition_6
 	_attributes_2.typography = typography
-	local _exp_5 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_2)), React.createElement(Icon, {
+	_attributes_2.TextColor3 = theme.components.select.textColor
+	local _exp_6 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_2)), React.createElement(Icon, {
 		name = "SelectCaret",
 		icon = "caret-down",
-		color = theme.colors.intents.primary.default.textColor,
+		color = theme.components.select.iconColor or theme.colors.intents.primary.default.textColor,
 	}))
-	local _condition_5 = open and overlay.overlay ~= nil
-	if _condition_5 then
+	local _condition_7 = open and overlay.overlay ~= nil
+	if _condition_7 then
 		local _attributes_3 = {
 			key = "SelectDropdown",
 			BackgroundTransparency = 0,
@@ -479,7 +494,7 @@ local Select = React.forwardRef(function(props, ref)
 		_attributes_3.Size = UDim2.fromOffset(dropdownSize.X.Offset, 0)
 		_attributes_3.AutomaticSize = Enum.AutomaticSize.Y
 		_attributes_3.ClipsDescendants = true
-		_condition_5 = ReactRoblox.createPortal(React.createElement("frame", _attributes_3, React.createElement("uistroke", {
+		_condition_7 = ReactRoblox.createPortal(React.createElement("frame", _attributes_3, React.createElement("uistroke", {
 			key = "Stroke",
 			Thickness = theme.components.select.borderThickness,
 			BorderStrokePosition = Enum.BorderStrokePosition.Outer,
@@ -509,7 +524,7 @@ local Select = React.forwardRef(function(props, ref)
 			typography = typography,
 		}))))), overlay.overlay)
 	end
-	return React.createElement(Container, _attributes, _exp_1, React.createElement(SelectContext.Provider, {
+	return React.createElement(Container, _attributes, _exp_1, _exp_2, React.createElement(SelectContext.Provider, {
 		value = context,
 	}, React.createElement("imagebutton", {
 		key = "SelectButton",
@@ -520,7 +535,7 @@ local Select = React.forwardRef(function(props, ref)
 		Event = {
 			Activated = activateSelect,
 		},
-	}, _exp_2, _exp_3, _exp_4, _exp_5, _condition_5)))
+	}, _exp_3, _exp_4, _exp_5, _exp_6, _condition_7)))
 end)
 Select.Option = SelectOption
 Select.OptGroup = SelectOptGroup

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

@@ -12,6 +12,7 @@ interface TabContentProps {
 }
 declare function TabContent(props: TabContentProps): React.JSX.Element;
 interface TabsListProps extends ScalableElementProps {
+    fill?: boolean;
     children?: React.ReactNode;
 }
 declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<ImageLabel>>;
@@ -24,6 +25,8 @@ declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.Re
 export interface TabsProps {
     children?: React.ReactNode;
     defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
 }
 type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<Frame>> & {
     List: typeof TabsList;

package/out/Components/Layout/Tabs.luau

@@ -14,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 SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
@@ -21,11 +22,44 @@ local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
 local TabsContext = React.createContext({
 	selected = nil,
-	setSelected = function() end,
+	claimTab = function() end,
+	selectTab = function() end,
 })
+local TabsListContext = React.createContext({
+	fill = false,
+})
+local function TabButtonCorners()
+	local theme = React.useContext(CleanThemeContext)
+	local cornerRadius = theme.components.tabs.button.cornerRadius
+	if not (type(cornerRadius) == "table") then
+		return React.createElement(Corners, {
+			radius = theme.components.tabs.list.cornerRadius,
+		})
+	end
+	local fallback = SizeHelper:toUDim(theme.components.tabs.list.cornerRadius)
+	local topLeftRadius = if cornerRadius.topLeft ~= nil then CssHelper:parseCssSize(cornerRadius.topLeft) else fallback
+	local topRightRadius = if cornerRadius.topRight ~= nil then CssHelper:parseCssSize(cornerRadius.topRight) else fallback
+	local bottomLeftRadius = if cornerRadius.bottomLeft ~= nil then CssHelper:parseCssSize(cornerRadius.bottomLeft) else fallback
+	local bottomRightRadius = if cornerRadius.bottomRight ~= nil then CssHelper:parseCssSize(cornerRadius.bottomRight) else fallback
+	local isZero = function(radius)
+		return radius.Scale == 0 and radius.Offset == 0
+	end
+	if isZero(topLeftRadius) and isZero(topRightRadius) and isZero(bottomLeftRadius) and isZero(bottomRightRadius) then
+		return nil
+	end
+	return React.createElement("uicorner", {
+		key = "Corners",
+		TopLeftRadius = topLeftRadius,
+		TopRightRadius = topRightRadius,
+		BottomLeftRadius = bottomLeftRadius,
+		BottomRightRadius = bottomRightRadius,
+	})
+end
 local function TabButtonContent(props)
 	local theme = React.useContext(CleanThemeContext)
 	local hover = React.useContext(HoverButtonContext)
+	local _binding = React.useContext(TabsListContext)
+	local fill = _binding.fill
 	local _result = hover
 	if _result ~= nil then
 		_result = _result.isSelected
@@ -41,13 +75,29 @@ local function TabButtonContent(props)
 		_result_1 = if _result_2 then "hover" else "default"
 	end
 	local intent = ColorHelper:getIntentColors(theme, "primary", _result_1, theme.components.tabs.button.intents)
-	return React.createElement(React.Fragment, nil, React.createElement(Corners, {
-		radius = theme.components.tabs.list.cornerRadius,
+	local _condition = intent.borderThickness
+	if _condition == nil then
+		_condition = theme.components.tabs.button.borderThickness
+	end
+	local borderThickness = _condition
+	return React.createElement(React.Fragment, nil, React.createElement(TabButtonCorners), borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
+		Thickness = borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = intent.borderColor,
+	})), React.createElement(Gradient, {
+		value = intent.backgroundGradient,
 	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.tabs.button.spacing, theme.components.tabs.button.padding),
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
-	}), React.createElement(Text, {
+	}), fill and (React.createElement("uilistlayout", {
+		key = "TitleLayout",
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})), React.createElement(Text, {
 		name = "TabTitleText",
 		TextColor3 = intent.textColor,
 		text = props.text,
@@ -58,16 +108,13 @@ local function TabTitle(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _binding = React.useContext(TabsContext)
 	local selected = _binding.selected
-	local setSelected = _binding.setSelected
+	local claimTab = _binding.claimTab
+	local selectTab = _binding.selectTab
+	local _binding_1 = React.useContext(TabsListContext)
+	local fill = _binding_1.fill
 	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)
+		claimTab(props.value)
 	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)
@@ -82,7 +129,7 @@ local function TabTitle(props)
 		name = `TabButton-{props.value}`,
 		default = {
 			Size = UDim2.fromScale(0, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
+			AutomaticSize = if fill then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
 			BackgroundColor3 = buttonDefault.backgroundColor,
 			BackgroundTransparency = buttonDefault.backgroundTransparency,
 			BorderSizePixel = 0,
@@ -96,7 +143,7 @@ local function TabTitle(props)
 			TileSize = buttonDefaultBackgroundImage.TileSize,
 			Event = {
 				Activated = function()
-					setSelected(props.value)
+					selectTab(props.value)
 				end,
 			},
 		},
@@ -153,7 +200,15 @@ local TabsList = React.forwardRef(function(props, ref)
 		value = theme.components.tabs.list.backgroundGradient,
 	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
-	}), React.createElement(HStack, nil, props.children))
+	}), React.createElement(TabsListContext.Provider, {
+		value = {
+			fill = props.fill == true,
+		},
+	}, React.createElement(HStack, {
+		HorizontalFlex = if props.fill then Enum.UIFlexAlignment.Fill else nil,
+		Wraps = if props.fill then false else nil,
+		Padding = if theme.components.tabs.list.gap ~= nil then UDim.new(0, theme.components.tabs.list.gap) else nil,
+	}, props.children)))
 end)
 local TabsBody = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
@@ -162,12 +217,12 @@ local TabsBody = React.forwardRef(function(props, ref)
 		ref = ref,
 		width = "100%",
 		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
-	}, React.createElement("uistroke", {
+	}, theme.components.tabs.borderThickness > 0 and (React.createElement("uistroke", {
 		key = "Stroke",
 		Thickness = theme.components.tabs.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.tabs.borderColor,
-	}), React.createElement(Padding, {
+	})), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
 	}), React.createElement(Corners, {
 		radius = theme.components.tabs.cornerRadius,
@@ -176,16 +231,41 @@ local TabsBody = React.forwardRef(function(props, ref)
 	}), props.children)
 end)
 local Tabs = React.forwardRef(function(props, _ref)
-	local selected, setSelected = React.useState(props.defaultValue)
+	local theme = React.useContext(CleanThemeContext)
+	local uncontrolledSelected, setUncontrolledSelected = React.useState(props.defaultValue)
+	local controlled = props.value ~= nil
+	local selected = if controlled then props.value else uncontrolledSelected
+	local onValueChange = props.onValueChange
 	local contextValue = React.useMemo(function()
 		return {
 			selected = selected,
-			setSelected = setSelected,
+			claimTab = function(value)
+				if not controlled then
+					setUncontrolledSelected(function(current)
+						local _condition = current
+						if _condition == nil then
+							_condition = value
+						end
+						return _condition
+					end)
+				end
+			end,
+			selectTab = function(value)
+				if not controlled then
+					setUncontrolledSelected(value)
+				end
+				local _result = onValueChange
+				if _result ~= nil then
+					_result(value)
+				end
+			end,
 		}
-	end, { selected })
+	end, { selected, controlled, onValueChange })
 	return React.createElement(TabsContext.Provider, {
 		value = contextValue,
-	}, React.createElement(VStack, nil, props.children))
+	}, React.createElement(VStack, {
+		Padding = if theme.components.tabs.gap ~= nil then UDim.new(0, theme.components.tabs.gap) else nil,
+	}, props.children))
 end)
 Tabs.List = TabsList
 Tabs.Body = TabsBody

package/out/Helpers/color.helper.luau

@@ -40,7 +40,17 @@ do
 			_overrideMatching = _overrideMatching[selectedIntent]
 		end
 		local overrideMatching = _overrideMatching
-		local layers = { defaultPrimary.default, defaultMatching.default, defaultPrimary[state], defaultMatching[state], self:resolveComponentDefaultLayer(componentPrimary), self:resolveComponentDefaultLayer(componentMatching), self:resolveComponentStateLayer(componentPrimary, state), self:resolveComponentStateLayer(componentMatching, state), self:resolveComponentDefaultLayer(overridePrimary), self:resolveComponentDefaultLayer(overrideMatching), self:resolveComponentStateLayer(overridePrimary, state), self:resolveComponentStateLayer(overrideMatching, state) }
+		local _exp = defaultPrimary.default
+		local _result = defaultMatching
+		if _result ~= nil then
+			_result = _result.default
+		end
+		local _exp_1 = defaultPrimary[state]
+		local _result_1 = defaultMatching
+		if _result_1 ~= nil then
+			_result_1 = _result_1[state]
+		end
+		local layers = { _exp, _result, _exp_1, _result_1, self:resolveComponentDefaultLayer(componentPrimary), self:resolveComponentDefaultLayer(componentMatching), self:resolveComponentStateLayer(componentPrimary, state), self:resolveComponentStateLayer(componentMatching, state), self:resolveComponentDefaultLayer(overridePrimary), self:resolveComponentDefaultLayer(overrideMatching), self:resolveComponentStateLayer(overridePrimary, state), self:resolveComponentStateLayer(overrideMatching, state) }
 		return self:mergeLayers(layers)
 	end
 	function ColorHelper:mergeLayers(layers)

package/out/Interfaces/semantics.d.ts

@@ -1,3 +1,3 @@
 export type ButtonFlag = "default" | "hover" | "focus" | "disabled";
 export type TextVariant = "display" | "title" | "heading" | "body" | "label" | "caption";
-export type Intent = "primary" | "success" | "warning" | "danger" | "info";
+export type Intent = "primary" | "secondary" | "success" | "warning" | "danger" | "info";

package/out/Theme/theme.style.d.ts

@@ -14,6 +14,7 @@ export interface IntentScheme {
     textColor: Color3;
     backgroundColor: Color3;
     borderColor: Color3;
+    borderThickness?: number;
     backgroundTransparency?: number;
     boxShadow?: CssShadow;
     typography?: Partial<TypographyStyle>;

package/out/Theme/theme.template.d.ts

@@ -2,7 +2,7 @@ import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, Scal
 import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition, CssCornerRadius } from "./theme.style";
 export interface ThemeTemplate {
     colors: {
-        intents: Record<Intent, IntentColors>;
+        intents: Record<Exclude<Intent, "secondary">, IntentColors> & Partial<Record<"secondary", IntentColors>>;
     };
     breakpoints: BreakpointValue<number>;
     default: {
@@ -78,6 +78,8 @@ export interface ThemeTemplate {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            backgroundColor?: Color3;
+            backgroundTransparency?: number;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
             backgroundGradient?: CssBackgroundGradient;
@@ -88,6 +90,10 @@ export interface ThemeTemplate {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            backgroundColor?: Color3;
+            backgroundTransparency?: number;
+            textColor?: Color3;
+            iconColor?: Color3;
             backgroundImage?: CssBackgroundImage;
             backgroundGradient?: CssBackgroundGradient;
             dropDownBackgroundColor: Color3;
@@ -152,7 +158,9 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
             padding?: ScaledCssPadding;
+            gap?: number;
             list: {
+                gap?: number;
                 borderColor?: Color3;
                 backgroundColor?: Color3;
                 backgroundTransparency?: number;
@@ -165,7 +173,7 @@ export interface ThemeTemplate {
             };
             button: {
                 borderThickness: number;
-                cornerRadius: CssSize;
+                cornerRadius: CssSize | CssCornerRadius;
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 boxShadow?: CssShadow;

package/out/Theme/themes/dark.theme.luau

@@ -17,6 +17,18 @@ local DarkTheme = createTheme({
 					backgroundColor = Color3.fromHex("#4775CC"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#D5DAE3"),
+					borderColor = Color3.fromHex("#4A5263"),
+					backgroundColor = Color3.fromHex("#3A414E"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#FFFFFF"),
+					borderColor = Color3.fromHex("#5E687B"),
+					backgroundColor = Color3.fromHex("#474F5E"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#75E0A7"),
@@ -162,6 +174,13 @@ local DarkTheme = createTheme({
 						backgroundTransparency = 0,
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D5DAE3"),
+						backgroundColor = Color3.fromHex("#2A303B"),
+						borderColor = Color3.fromHex("#4A5263"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#75E0A7"),
@@ -216,6 +235,21 @@ local DarkTheme = createTheme({
 						backgroundColor = Color3.fromHex("#b8b8b8"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#5E687B"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#3A414E"), Color3.fromHex("#474F5E") },
+							rotation = 90,
+						},
+					},
+					disabled = {
+						backgroundColor = Color3.fromHex("#1D222B"),
+						borderColor = Color3.fromHex("#343B49"),
+						textColor = Color3.fromHex("#697386"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
@@ -531,6 +565,13 @@ local DarkTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#3A414E"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#4A5263"),
+						},
+					},
 				},
 			},
 			footer = {
@@ -541,6 +582,13 @@ local DarkTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#3A414E"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#4A5263"),
+						},
+					},
 				},
 			},
 		},
@@ -612,6 +660,15 @@ local DarkTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#6B7486"), Color3.fromHex("#474F5E") },
+								rotation = 90,
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#FFFFFF"),

package/out/Theme/themes/default.theme.luau

@@ -15,6 +15,18 @@ local DefaultTheme = {
 					backgroundColor = Color3.fromHex("F5F5F5"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#1D2433"),
+					borderColor = Color3.fromHex("#C5CAD3"),
+					backgroundColor = Color3.fromHex("#E4E7EC"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#1D2433"),
+					borderColor = Color3.fromHex("#B8BEC9"),
+					backgroundColor = Color3.fromHex("#D5D9E0"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#2E9D63"),
@@ -189,6 +201,13 @@ local DefaultTheme = {
 						backgroundTransparency = 0,
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#6B7C93"),
+						borderColor = Color3.fromHex("#56657A"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
@@ -235,6 +254,18 @@ local DefaultTheme = {
 						textColor = Color3.fromHex("#8A8A8A"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#E4E7EC"),
+						borderColor = Color3.fromHex("#C5CAD3"),
+					},
+					hover = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#D5D9E0"),
+						borderColor = Color3.fromHex("#B8BEC9"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
@@ -549,6 +580,13 @@ local DefaultTheme = {
 							borderColor = Color3.fromHex("#D9DEE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+							backgroundTransparency = 0.7,
+							borderColor = Color3.fromHex("#56657A"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -588,6 +626,13 @@ local DefaultTheme = {
 							borderColor = Color3.fromHex("#D9DEE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+							backgroundTransparency = 0.7,
+							borderColor = Color3.fromHex("#56657A"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -692,6 +737,11 @@ local DefaultTheme = {
 							backgroundColor = Color3.fromHex("#477FE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -742,6 +792,9 @@ local DefaultTheme = {
 				primary = {
 					backgroundTransparency = 0,
 				},
+				secondary = {
+					backgroundColor = Color3.fromHex("#E4E7EC"),
+				},
 				success = {
 					backgroundColor = Color3.fromHex("#dcf5e8"),
 				},
@@ -765,6 +818,9 @@ local DefaultTheme = {
 						backgroundColor = Color3.fromHex("#000000"),
 						backgroundTransparency = 0.5,
 					},
+					secondary = {
+						backgroundColor = Color3.fromHex("#6B7C93"),
+					},
 					success = {
 						backgroundColor = Color3.fromHex("#237D4D"),
 					},
@@ -793,6 +849,9 @@ local DefaultTheme = {
 			cornerRadius = 8,
 			boxShadow = "2px 2px 2px 2px",
 			intents = {
+				secondary = {
+					textColor = Color3.fromHex("#1D2433"),
+				},
 				success = {
 					textColor = Color3.fromHex("#FFFFFF"),
 				},

package/out/Theme/themes/sandstone.theme.luau

@@ -17,6 +17,18 @@ local SandstoneTheme = createTheme({
 					backgroundColor = Color3.fromHex("#C4DDD7"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#5E5446"),
+					borderColor = Color3.fromHex("#A89A84"),
+					backgroundColor = Color3.fromHex("#EAE2D4"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#4A4034"),
+					borderColor = Color3.fromHex("#928470"),
+					backgroundColor = Color3.fromHex("#DFD5C3"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#2E6245"),
@@ -162,6 +174,13 @@ local SandstoneTheme = createTheme({
 						backgroundTransparency = 0,
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#5E5446"),
+						backgroundColor = Color3.fromHex("#EAE2D4"),
+						borderColor = Color3.fromHex("#A89A84"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#2E6245"),
@@ -207,6 +226,16 @@ local SandstoneTheme = createTheme({
 						textColor = Color3.fromHex("#9B8B73"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#5E5446"),
+					},
+					disabled = {
+						backgroundColor = Color3.fromHex("#E8DFCF"),
+						borderColor = Color3.fromHex("#D8CDBA"),
+						textColor = Color3.fromHex("#9B8B73"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#2E6245"),
@@ -492,6 +521,13 @@ local SandstoneTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#E3D9C6"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#A89A84"),
+						},
+					},
 				},
 			},
 			footer = {
@@ -502,6 +538,13 @@ local SandstoneTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#E3D9C6"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#A89A84"),
+						},
+					},
 				},
 			},
 		},
@@ -566,6 +609,11 @@ local SandstoneTheme = createTheme({
 							backgroundColor = Color3.fromHex("#4E8179"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#A89A84"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#5B8A6A"),

package/out/Theme/themes/wooden.theme.luau

@@ -39,6 +39,13 @@ local WoodenTheme = createTheme({
 					textColor = Color3.fromHex("#FFF7CF"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#D3CBA3"),
+					borderColor = Color3.fromHex("#3D2712"),
+					backgroundColor = Color3.fromHex("#5C3A18"),
+				},
+			},
 		},
 	},
 	components = {
@@ -82,6 +89,13 @@ local WoodenTheme = createTheme({
 						backgroundTransparency = 0,
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D3CBA3"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#5C3A18"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFF7CF"),
@@ -138,6 +152,27 @@ local WoodenTheme = createTheme({
 						},
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D3CBA3"),
+						borderColor = Color3.fromHex("#3D2712"),
+						borderThickness = 3,
+						backgroundColor = Color3.fromHex("#FFFFFF"),
+						backgroundTransparency = 0,
+						backgroundImage = {
+							image = "",
+						},
+						backgroundGradient = {
+							colors = { Color3.fromHex("#7A4A20"), Color3.fromHex("#5C3A18") },
+							rotation = 90,
+						},
+					},
+					hover = {
+						backgroundGradient = {
+							colors = { Color3.fromHex("#8A5A28"), Color3.fromHex("#6B4520") },
+						},
+					},
+				},
 				success = {
 					default = {
 						backgroundImage = {
@@ -397,6 +432,15 @@ local WoodenTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							textColor = Color3.fromHex("#D3CBA3"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#5C3A18"),
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundTransparency = 1,
@@ -458,6 +502,15 @@ local WoodenTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							textColor = Color3.fromHex("#D3CBA3"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#5C3A18"),
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundTransparency = 1,
@@ -679,6 +732,11 @@ local WoodenTheme = createTheme({
 							backgroundColor = Color3.fromHex("#A16B30"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#8C7B62"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#4E6A24"),
@@ -798,6 +856,10 @@ local WoodenTheme = createTheme({
 					borderColor = Color3.fromHex("#3D2712"),
 					backgroundTransparency = 0,
 				},
+				secondary = {
+					textColor = Color3.fromHex("#D3CBA3"),
+					backgroundColor = Color3.fromHex("#5C3A18"),
+				},
 				success = {
 					backgroundColor = Color3.fromHex("#4E6A24"),
 				},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {