@rbxts/react-clean-ui 1.0.36 → 1.1.0

package/out/Components/Layout/Tabs.luau

@@ -12,6 +12,7 @@ local Corners = _Decorator.Corners
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
@@ -45,9 +46,9 @@ local function TabButtonContent(props)
 	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.button.cornerRadius,
+		radius = theme.components.tabs.list.cornerRadius,
 	}), React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.button.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.tabs.button.spacing, theme.components.tabs.button.padding),
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
 	}), React.createElement(Text, {
@@ -98,25 +99,47 @@ local Tabs = React.forwardRef(function(props, ref)
 	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 = {
+		ref = ref,
+		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
+		width = "100%",
+	}
+	local _condition = theme.components.tabs.list.backgroundTransparency
+	if _condition == nil then
+		_condition = 0
+	end
+	_attributes.BackgroundTransparency = _condition
+	_attributes.backgroundImage = theme.components.tabs.list.backgroundImage
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.tabs.list.cornerRadius,
 	})
 	local _exp_1 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing),
+		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,
-				ImageTransparency = 1,
 				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)
@@ -126,41 +149,50 @@ local Tabs = React.forwardRef(function(props, ref)
 			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, {
-			text = tab.title.text,
-		}))
+		}, 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, {
-		ref = ref,
-		BackgroundColor3 = theme.components.tabs.list.backgroundColor,
-		width = "100%",
-		BackgroundTransparency = 0,
-	}, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
+	local _exp_2 = React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(HStack, nil, _newValue))
 	local _exp_3 = React.createElement("uistroke", {
 		Thickness = theme.components.tabs.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.tabs.borderColor,
 	})
 	local _exp_4 = React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing),
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
 	})
 	local _exp_5 = React.createElement(Corners, {
-		radius = theme.components.tabs.list.cornerRadius,
+		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, nil, _exp_3, _exp_4, _exp_5, _result))
+	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))
 end)
 Tabs.Title = TabTitle
 Tabs.Tab = Tab

package/out/Components/Navigation/Menu.d.ts

@@ -8,7 +8,7 @@ interface MenuProps {
     title: string;
     collapsed?: boolean;
 }
-type MenuComponent = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<Frame>> & {
+type MenuComponent = React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<ImageLabel>> & {
     Item: typeof MenuItem;
 };
 declare const Menu: MenuComponent;

package/out/Components/Navigation/Menu.luau

@@ -40,6 +40,7 @@ local Menu = React.forwardRef(function(props, ref)
 		valign = "Center",
 	}, React.createElement(Button, {
 		icon = "bars",
+		LayoutOrder = 1,
 		Event = {
 			Activated = function()
 				setCollapsed(not collapsed)
@@ -48,6 +49,7 @@ local Menu = React.forwardRef(function(props, ref)
 	}), not collapsed and React.createElement(Text, {
 		text = props.title,
 		variant = "heading",
+		LayoutOrder = 2,
 	}))), React.createElement(FlexItem, {
 		mode = "Fill",
 	}, React.createElement(Scroller, {

package/out/Components/Surface/Box.d.ts

@@ -1,7 +1,9 @@
 import React from "@rbxts/react";
 import { BackgroundElementProps, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
-export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, PositionElementProps, React.InstanceProps<Frame> {
+import { CssBackgroundImage } from "../../Theme";
+export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, PositionElementProps, React.InstanceProps<ImageLabel> {
     'border-thickness'?: number;
     'border-color'?: Color3;
+    'background-image'?: CssBackgroundImage;
 }
-export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<Frame>>;
+export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Surface/Box.luau

@@ -7,9 +7,16 @@ local Padding = _Decorator.Padding
 local Corners = _Decorator.Corners
 local BoxShadow = _Decorator.BoxShadow
 local Container = TS.import(script, script.Parent.Parent, "Layout").Container
-local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local SizeHelper = _Helpers.SizeHelper
+local SpacingHelper = _Helpers.SpacingHelper
 local Box = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
+	local _condition = props["border-thickness"]
+	if _condition == nil then
+		_condition = theme.components.box.borderThickness
+	end
+	local borderThickness = _condition
 	local _attributes = {
 		ref = ref,
 	}
@@ -17,31 +24,27 @@ local Box = React.forwardRef(function(props, ref)
 		_attributes[_k] = _v
 	end
 	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
-	_attributes.AutomaticSize = Enum.AutomaticSize.XY
-	local _condition = props.BackgroundTransparency
-	if _condition == nil then
-		_condition = theme.components.box.backgroundTransparency
+	_attributes.AutomaticSize = SizeHelper:GetAutoSize(props)
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = theme.components.box.backgroundTransparency
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BackgroundColor3 = props.BackgroundColor3 or theme.components.box.backgroundColor
 	_attributes.ZIndex = props.ZIndex
 	_attributes.Event = props.Event
-	local _attributes_1 = {}
-	local _condition_1 = props["border-thickness"]
-	if _condition_1 == nil then
-		_condition_1 = theme.components.box.borderThickness
-	end
-	_attributes_1.Thickness = _condition_1
-	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
-	_attributes_1.Color = props["border-color"] or theme.components.box.borderColor
-	local _exp = React.createElement("uistroke", _attributes_1)
-	local _attributes_2 = table.clone(props)
-	setmetatable(_attributes_2, nil)
-	_attributes_2.value = theme.components.box.boxShadow
-	local _exp_1 = React.createElement(BoxShadow, _attributes_2)
-	local _attributes_3 = table.clone(props)
-	setmetatable(_attributes_3, nil)
-	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(Padding, _attributes_3), React.createElement(Corners, {
+	_attributes.backgroundImage = props["background-image"] or theme.components.box.backgroundImage
+	local _exp = borderThickness > 0 and (React.createElement("uistroke", {
+		Thickness = borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = props["border-color"] or theme.components.box.borderColor,
+	}))
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	_attributes_1.value = theme.components.box.boxShadow
+	return React.createElement(Container, _attributes, _exp, React.createElement(BoxShadow, _attributes_1), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.box.spacing, theme.components.box.padding),
+	}), React.createElement(Corners, {
 		radius = theme.components.box.cornerRadius,
 	}), props.children)
 end)

package/out/Components/Surface/Card.d.ts

@@ -1,19 +1,25 @@
 import React from "@rbxts/react";
 import { BoxProps } from "./Box";
-import { IntentElementProps } from "../../Interfaces";
-interface CardHeaderProps extends IntentElementProps {
+import { CssPadding, IntentElementProps, PositionElementProps, ResolvedPadding, SpacedElementProps, ZIndexElementProps } from "../../Interfaces";
+interface CardHeaderProps extends IntentElementProps, PositionElementProps, ZIndexElementProps, SpacedElementProps {
     children?: React.ReactNode;
+    overlay?: boolean;
+    padding?: CssPadding;
+    resolvedPadding?: ResolvedPadding;
 }
-export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<Frame>>;
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<ImageLabel>>;
 interface CardBodyProps extends BoxProps {
 }
-export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<Frame>>;
+export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<ImageLabel>>;
 interface CardFooterProps extends BoxProps, IntentElementProps {
+    overlay?: boolean;
+    padding?: CssPadding;
+    resolvedPadding?: ResolvedPadding;
 }
-export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<ImageLabel>>;
 interface CardProps extends BoxProps, IntentElementProps {
 }
-type CardComponent = React.ForwardRefExoticComponent<CardProps & React.RefAttributes<Frame>> & {
+type CardComponent = React.ForwardRefExoticComponent<CardProps & React.RefAttributes<ImageLabel>> & {
     Header: typeof CardHeader;
     Footer: typeof CardFooter;
     Body: typeof CardBody;