@rbxts/react-clean-ui 1.2.5 → 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/BreakpointProvider.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { BreakPointElementProps } from "../../Interfaces/";
+export interface BreakpointProviderProps extends BreakPointElementProps {
+    name?: string;
+    LayoutOrder?: number;
+    children?: React.ReactNode;
+}
+export declare const BreakpointProvider: React.ForwardRefExoticComponent<BreakpointProviderProps & React.RefAttributes<Frame>>;

package/out/Components/Layout/BreakpointProvider.luau

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local BreakpointContext = _Contexts.BreakpointContext
+local CleanThemeContext = _Contexts.CleanThemeContext
+local BreakpointHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").BreakpointHelper
+local BreakpointProvider = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local frameRef = React.useRef()
+	local widthRef = React.useRef(0)
+	local value, setValue = React.useState(function()
+		return {
+			width = 0,
+			breakpoint = BreakpointHelper:getBreakpoint(0, breakpoints),
+		}
+	end)
+	local valueRef = React.useRef(value)
+	local resolve = function(width)
+		widthRef.current = width
+		local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+		if breakpoint == valueRef.current.breakpoint then
+			return nil
+		end
+		local resolved = {
+			width = width,
+			breakpoint = breakpoint,
+		}
+		valueRef.current = resolved
+		setValue(resolved)
+	end
+	React.useEffect(function()
+		local instance = frameRef.current
+		resolve(if instance ~= nil then instance.AbsoluteSize.X else widthRef.current)
+	end, { breakpoints })
+	local setFrame = React.useCallback(function(instance)
+		frameRef.current = instance
+		local _ref = ref
+		if type(_ref) == "function" then
+			ref(instance)
+		elseif ref ~= nil then
+			ref.current = instance
+		end
+	end, { ref })
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "BreakpointProvider"
+	end
+	_attributes.key = _condition
+	_attributes.ref = setFrame
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Size = UDim2.fromScale(1, 1)
+	_attributes.BackgroundTransparency = 1
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			return resolve(instance.AbsoluteSize.X)
+		end,
+	}
+	return React.createElement("frame", _attributes, React.createElement(BreakpointContext.Provider, {
+		value = value,
+	}, props.children))
+end)
+return {
+	BreakpointProvider = BreakpointProvider,
+}

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;