@rbxts/react-clean-ui 1.0.19 → 1.0.38

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")
@@ -98,6 +99,20 @@ 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,
 	})
@@ -112,11 +127,17 @@ local Tabs = React.forwardRef(function(props, ref)
 			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,10 +147,24 @@ 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,
@@ -139,12 +174,7 @@ local Tabs = React.forwardRef(function(props, ref)
 		_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,

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

@@ -1,11 +1,14 @@
-import React from "@rbxts/react";
+import React, { Binding } from "@rbxts/react";
 import { SpacedElementProps } from "../../Interfaces";
 interface VStackProps extends SpacedElementProps {
+    valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
     children?: React.ReactNode;
     HorizontalFlex?: Enum.UIFlexAlignment;
     VerticalFlex?: Enum.UIFlexAlignment;
+    VerticalAlignment?: Enum.VerticalAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
+    Padding?: UDim | Binding<UDim>;
 }
 export declare function VStack(props: VStackProps): React.JSX.Element;
 export {};

package/out/Components/Layout/VStack.luau

@@ -5,12 +5,12 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function VStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
 	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
 		FillDirection = Enum.FillDirection.Vertical,
 		HorizontalFlex = props.HorizontalFlex or Enum.UIFlexAlignment.Fill,
 		VerticalFlex = props.VerticalFlex,
-		Padding = padding,
+		VerticalAlignment = props.VerticalAlignment or props.valign,
+		Padding = props.Padding or UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing)),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 		Change = props.Change,
 		Event = props.Event,

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

@@ -1,4 +1,5 @@
 export * from './Column';
+export * from './Accordion';
 export * from './Container';
 export * from './Draggable';
 export * from './Droppable';

package/out/Components/Layout/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "Column") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Accordion") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Container") or {} do
 	exports[_k] = _v
 end

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/Surface/Box.d.ts

@@ -1,7 +1,9 @@
 import React from "@rbxts/react";
-import { BackgroundElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
-export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, React.InstanceProps<Frame> {
+import { BackgroundElementProps, PositionElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+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,17 @@ 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 CssHelper = _Helpers.CssHelper
 local Box = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
+	local paddingSourceProps = props
+	local hasCustomPadding = paddingSourceProps.top ~= nil or paddingSourceProps.bottom ~= nil or paddingSourceProps.left ~= nil or paddingSourceProps.right ~= nil or paddingSourceProps.spacing ~= nil or paddingSourceProps.padding ~= nil or paddingSourceProps.resolvedPadding ~= nil
+	local themePadding = theme.components.box.padding
+	local paddingProps = if not hasCustomPadding and themePadding ~= nil then {
+		resolvedPadding = CssHelper:parseCssQuad(themePadding),
+	} else paddingSourceProps
 	local _attributes = {
 		ref = ref,
 	}
@@ -17,7 +25,7 @@ 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
+	_attributes.AutomaticSize = SizeHelper:GetAutoSize(props)
 	local _condition = props.BackgroundTransparency
 	if _condition == nil then
 		_condition = theme.components.box.backgroundTransparency
@@ -26,6 +34,7 @@ local Box = React.forwardRef(function(props, ref)
 	_attributes.BackgroundColor3 = props.BackgroundColor3 or theme.components.box.backgroundColor
 	_attributes.ZIndex = props.ZIndex
 	_attributes.Event = props.Event
+	_attributes.backgroundImage = props["background-image"] or theme.components.box.backgroundImage
 	local _attributes_1 = {}
 	local _condition_1 = props["border-thickness"]
 	if _condition_1 == nil then
@@ -39,7 +48,7 @@ local Box = React.forwardRef(function(props, ref)
 	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)
+	local _attributes_3 = table.clone(paddingProps)
 	setmetatable(_attributes_3, nil)
 	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(Padding, _attributes_3), React.createElement(Corners, {
 		radius = theme.components.box.cornerRadius,

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

@@ -1,19 +1,21 @@
 import React from "@rbxts/react";
 import { BoxProps } from "./Box";
-import { IntentElementProps } from "../../Interfaces";
-interface CardHeaderProps extends IntentElementProps {
+import { IntentElementProps, PositionElementProps, ZIndexElementProps } from "../../Interfaces";
+interface CardHeaderProps extends IntentElementProps, PositionElementProps, ZIndexElementProps {
     children?: React.ReactNode;
+    overlay?: boolean;
 }
-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;
 }
-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;