@rbxts/react-clean-ui 1.0.36 → 1.0.38

package/out/Components/Typography/Text.luau

@@ -7,22 +7,95 @@ local Text = React.forwardRef(function(props, ref)
 	local style = props.typography or theme.typography[props.variant or "body"]
 	local weight = if props.weight == "bold" then Enum.FontWeight.Bold else props.weight or style.weight or Enum.FontWeight.Regular
 	local textwrapped = props.TextWrap ~= false and props.TextWrapped ~= false
+	local _condition = props.letterSpacing
+	if _condition == nil then
+		_condition = style.letterSpacing
+	end
+	local letterSpacing = _condition
+	-- Roblox text instances have no native letter-spacing property, so a nonzero
+	-- value is faked by splitting the text into one TextLabel per character laid
+	-- out in a UIListLayout row with the spacing as its Padding. This only makes
+	-- sense for short, single-line, plain text: RichText is forced off per-character
+	-- (markup tags can't survive being split apart), and wrapping/truncation are
+	-- moot since each character label auto-sizes to itself and never overflows.
+	if letterSpacing ~= nil and letterSpacing ~= 0 and props.text ~= "" then
+		local characters = {}
+		for index = 0, #props.text - 1 do
+			local _text = props.text
+			local _arg0 = index + 1
+			local _arg1 = index + 1
+			local _arg0_1 = string.sub(_text, _arg0, _arg1)
+			table.insert(characters, _arg0_1)
+		end
+		local _exp = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, letterSpacing),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			HorizontalAlignment = props.align or Enum.HorizontalAlignment.Left,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#characters)
+		local _callback = function(character, index)
+			local _attributes = {
+				key = index,
+				LayoutOrder = index,
+				Size = UDim2.fromScale(0, 0),
+				AutomaticSize = Enum.AutomaticSize.XY,
+				BackgroundTransparency = 1,
+				TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor,
+				Text = character,
+			}
+			local _condition_1 = props.LineHeight
+			if _condition_1 == nil then
+				_condition_1 = style.lineHeight
+			end
+			_attributes.LineHeight = _condition_1
+			_attributes.FontFace = Font.fromName(style.font.Name, weight)
+			_attributes.FontSize = style.size
+			_attributes.RichText = false
+			local _condition_2 = props.TextScaled
+			if _condition_2 == nil then
+				_condition_2 = false
+			end
+			_attributes.TextScaled = _condition_2
+			_attributes.TextStrokeColor3 = props.TextStrokeColor3
+			_attributes.TextStrokeTransparency = props.TextStrokeTransparency
+			_attributes.TextTransparency = props.TextTransparency
+			return React.createElement("textlabel", _attributes)
+		end
+		for _k, _v in characters do
+			_newValue[_k] = _callback(_v, _k - 1, characters)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return React.createElement("frame", {
+			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			AnchorPoint = props.AnchorPoint,
+			BackgroundTransparency = 1,
+			Position = props.Position,
+			ZIndex = props.ZIndex,
+			LayoutOrder = props.LayoutOrder,
+			Visible = props.Visible,
+			Rotation = props.Rotation,
+		}, _exp, _newValue)
+	end
 	local _attributes = {
 		ref = ref,
 		Size = UDim2.fromScale(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		AnchorPoint = props.AnchorPoint,
 	}
-	local _condition = props.LineHeight
-	if _condition == nil then
-		_condition = style.lineHeight
-	end
-	_attributes.LineHeight = _condition
-	local _condition_1 = props.BackgroundTransparency
+	local _condition_1 = props.LineHeight
 	if _condition_1 == nil then
-		_condition_1 = 1
+		_condition_1 = style.lineHeight
+	end
+	_attributes.LineHeight = _condition_1
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = 1
 	end
-	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BackgroundTransparency = _condition_2
 	_attributes.TextXAlignment = props.align or (props.TextXAlignment or Enum.TextXAlignment.Left)
 	_attributes.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
 	_attributes.Text = props.text
@@ -31,9 +104,45 @@ local Text = React.forwardRef(function(props, ref)
 	_attributes.TextWrapped = textwrapped
 	_attributes.FontFace = Font.fromName(style.font.Name, weight)
 	_attributes.FontSize = style.size
-	_attributes.RichText = true
+	local _condition_3 = props.RichText
+	if _condition_3 == nil then
+		_condition_3 = true
+	end
+	_attributes.RichText = _condition_3
+	local _condition_4 = props.TextScaled
+	if _condition_4 == nil then
+		_condition_4 = false
+	end
+	_attributes.TextScaled = _condition_4
+	_attributes.ZIndex = props.ZIndex
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Visible = props.Visible
+	_attributes.Rotation = props.Rotation
+	_attributes.Active = props.Active
+	_attributes.Archivable = props.Archivable
+	_attributes.BackgroundColor3 = props.BackgroundColor3
+	_attributes.BorderColor3 = props.BorderColor3
+	_attributes.BorderMode = props.BorderMode
+	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.ClipsDescendants = props.ClipsDescendants
+	_attributes.Selectable = props.Selectable
+	_attributes.SelectionImageObject = props.SelectionImageObject
+	_attributes.SizeConstraint = props.SizeConstraint
+	_attributes.Tag = props.Tag
+	_attributes.AutoLocalize = props.AutoLocalize
+	_attributes.RootLocalizationTable = props.RootLocalizationTable
+	_attributes.NextSelectionDown = props.NextSelectionDown
+	_attributes.NextSelectionLeft = props.NextSelectionLeft
+	_attributes.NextSelectionRight = props.NextSelectionRight
+	_attributes.NextSelectionUp = props.NextSelectionUp
+	_attributes.SelectionGroup = props.SelectionGroup
+	_attributes.SelectionOrder = props.SelectionOrder
+	_attributes.TextStrokeColor3 = props.TextStrokeColor3
+	_attributes.TextStrokeTransparency = props.TextStrokeTransparency
+	_attributes.TextTransparency = props.TextTransparency
+	_attributes.TextTruncate = props.TextTruncate
+	_attributes.Change = props.Change
 	_attributes.Event = props.Event
-	_attributes.TextScaled = false
 	return React.createElement("textlabel", _attributes, props.children)
 end)
 return {

package/out/Contexts/row.context.d.ts

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { Breakpoint } from "../Interfaces/clean.element.props";
+import { Breakpoint } from "../Interfaces/responsive.types";
 export interface RowContextValue {
     width: number;
     breakpoint: Breakpoint;

package/out/Contexts/theme.context.d.ts

@@ -1,3 +1,3 @@
 import React from "@rbxts/react";
-import { CleanTheme } from "../Theme/theme.template";
-export declare const CleanThemeContext: React.Context<CleanTheme>;
+import { ThemeTemplate } from "../Theme/theme.template";
+export declare const CleanThemeContext: React.Context<ThemeTemplate>;

package/out/Helpers/color.helper.d.ts

@@ -1,9 +1,11 @@
-import { CleanTheme, InlineIntentColors, IntentScheme } from "../Theme";
+import { ThemeTemplate, InlineIntentColors, IntentScheme } from "../Theme";
 import { ButtonFlag, Intent } from "../Interfaces";
 type ComponentIntentColors = Partial<Record<Intent, InlineIntentColors>> | Partial<Record<Intent, Partial<IntentScheme>>>;
 export declare class ColorHelper {
-    static getIntentColors(theme: CleanTheme, intent: Intent | undefined, state?: ButtonFlag, componentColors?: ComponentIntentColors): IntentScheme;
-    private static resolveComponentColors;
+    static getIntentColors(theme: ThemeTemplate, intent: Intent | undefined, state?: ButtonFlag, componentColors?: ComponentIntentColors, overrideColors?: ComponentIntentColors): IntentScheme;
+    private static mergeLayers;
+    private static resolveComponentDefaultLayer;
+    private static resolveComponentStateLayer;
     private static isInlineIntentColors;
 }
 export {};

package/out/Helpers/color.helper.luau

@@ -13,7 +13,7 @@ do
 	end
 	function ColorHelper:constructor()
 	end
-	function ColorHelper:getIntentColors(theme, intent, state, componentColors)
+	function ColorHelper:getIntentColors(theme, intent, state, componentColors, overrideColors)
 		if state == nil then
 			state = "default"
 		end
@@ -30,49 +30,77 @@ do
 			_componentMatching = _componentMatching[selectedIntent]
 		end
 		local componentMatching = _componentMatching
-		local _object = table.clone(defaultPrimary.default)
-		setmetatable(_object, nil)
-		local _condition = defaultPrimary[state]
-		if _condition == nil then
-			_condition = {}
+		local _overridePrimary = overrideColors
+		if _overridePrimary ~= nil then
+			_overridePrimary = _overridePrimary.primary
 		end
-		for _k, _v in _condition do
-			_object[_k] = _v
+		local overridePrimary = _overridePrimary
+		local _overrideMatching = overrideColors
+		if _overrideMatching ~= nil then
+			_overrideMatching = _overrideMatching[selectedIntent]
 		end
-		for _k, _v in defaultMatching.default do
-			_object[_k] = _v
-		end
-		local _condition_1 = defaultMatching[state]
-		if _condition_1 == nil then
-			_condition_1 = {}
-		end
-		for _k, _v in _condition_1 do
-			_object[_k] = _v
-		end
-		for _k, _v in self:resolveComponentColors(componentPrimary, state) do
-			_object[_k] = _v
-		end
-		for _k, _v in self:resolveComponentColors(componentMatching, state) do
-			_object[_k] = _v
+		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) }
+		return self:mergeLayers(layers)
+	end
+	function ColorHelper:mergeLayers(layers)
+		local merged = {}
+		local backgroundImage
+		local typography
+		for _, layer in layers do
+			if layer == nil then
+				continue
+			end
+			local _object = table.clone(merged)
+			setmetatable(_object, nil)
+			for _k, _v in layer do
+				_object[_k] = _v
+			end
+			merged = _object
+			if layer.backgroundImage ~= nil then
+				local _object_1 = {}
+				if backgroundImage then
+					for _k, _v in backgroundImage do
+						_object_1[_k] = _v
+					end
+				end
+				for _k, _v in layer.backgroundImage do
+					_object_1[_k] = _v
+				end
+				backgroundImage = _object_1
+			end
+			if layer.typography ~= nil then
+				local _object_1 = {}
+				if typography then
+					for _k, _v in typography do
+						_object_1[_k] = _v
+					end
+				end
+				for _k, _v in layer.typography do
+					_object_1[_k] = _v
+				end
+				typography = _object_1
+			end
 		end
-		return _object
+		merged.backgroundImage = backgroundImage
+		merged.typography = typography
+		return merged
 	end
-	function ColorHelper:resolveComponentColors(colors, state)
+	function ColorHelper:resolveComponentDefaultLayer(colors)
 		if colors == nil then
-			return {}
+			return nil
 		end
 		if self:isInlineIntentColors(colors) then
-			local _object = table.clone((colors.default or {}))
-			setmetatable(_object, nil)
-			for _k, _v in (colors[state] or {}) do
-				_object[_k] = _v
-			end
-			return _object
+			return colors.default
 		end
-		-- A direct Partial<IntentScheme> has no state variants,
-		-- so the requested state is ignored.
 		return colors
 	end
+	function ColorHelper:resolveComponentStateLayer(colors, state)
+		if colors == nil or not self:isInlineIntentColors(colors) then
+			return nil
+		end
+		return colors[state]
+	end
 	function ColorHelper:isInlineIntentColors(colors)
 		local statefulColors = colors
 		return statefulColors.default ~= nil or statefulColors.hover ~= nil or statefulColors.focus ~= nil

package/out/Helpers/create-ui-story.d.ts

@@ -2,7 +2,7 @@ import React from "@rbxts/react";
 import ReactRoblox from "@rbxts/react-roblox";
 import { InferProps } from "@rbxts/ui-labs";
 declare const controls: {
-    Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone">;
+    Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone" | "Wooden">;
 };
 type StoryControl = Parameters<typeof import("@rbxts/ui-labs").Ordered>[0];
 type StoryControls = Record<string, StoryControl>;
@@ -11,7 +11,7 @@ export declare function createStory<T extends StoryControls = {}>(StoryComponent
     react: typeof React;
     reactRoblox: typeof ReactRoblox;
     controls: {
-        Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone">;
+        Theme: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Choose<"Default" | "Dark" | "Sandstone" | "Wooden">;
     } & T;
     story: (props: StoryProps<T>) => React.JSX.Element;
 };

package/out/Helpers/create-ui-story.luau

@@ -6,10 +6,38 @@ local _Theme = TS.import(script, script.Parent.Parent, "Theme")
 local DarkTheme = _Theme.DarkTheme
 local DefaultTheme = _Theme.DefaultTheme
 local SandstoneTheme = _Theme.SandstoneTheme
+local WoodenTheme = _Theme.WoodenTheme
 local Choose = TS.import(script, TS.getModule(script, "@rbxts", "ui-labs").src).Choose
 local CleanUiProvider = TS.import(script, script.Parent.Parent, "Providers", "app.provider").CleanUiProvider
+local THEME_ATTRIBUTE = "UILabsSelectedTheme"
+local themeControl = Choose({ "Default", "Dark", "Sandstone", "Wooden" })
+local persistedTheme = script:GetAttribute(THEME_ATTRIBUTE)
+local function isThemeName(value)
+	local _value = value
+	local _condition = type(_value) == "string"
+	if _condition then
+		local _exp = themeControl.List
+		-- ▼ ReadonlyArray.some ▼
+		local _result = false
+		local _callback = function(theme)
+			return theme == value
+		end
+		for _k, _v in _exp do
+			if _callback(_v, _k - 1, _exp) then
+				_result = true
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.some ▲
+		_condition = _result
+	end
+	return _condition
+end
+if isThemeName(persistedTheme) then
+	themeControl.ControlValue = persistedTheme
+end
 local controls = {
-	Theme = Choose({ "Default", "Dark", "Sandstone" }),
+	Theme = themeControl,
 }
 local function createStory(StoryComponent, additionalControls)
 	local _object = {}
@@ -28,6 +56,7 @@ local function createStory(StoryComponent, additionalControls)
 		controls = storyControls,
 		story = function(props)
 			local baseProps = props
+			script:SetAttribute(THEME_ATTRIBUTE, baseProps.controls.Theme)
 			local theme = DefaultTheme
 			if baseProps.controls.Theme == "Dark" then
 				theme = DarkTheme
@@ -35,6 +64,9 @@ local function createStory(StoryComponent, additionalControls)
 			if baseProps.controls.Theme == "Sandstone" then
 				theme = SandstoneTheme
 			end
+			if baseProps.controls.Theme == "Wooden" then
+				theme = WoodenTheme
+			end
 			local _attributes = table.clone(props)
 			setmetatable(_attributes, nil)
 			return React.createElement(CleanUiProvider, {

package/out/Helpers/css.helper.d.ts

@@ -1,13 +1,39 @@
-import { CssBoxShadow, CssShadow, CssSize } from "../Interfaces/clean.element.props";
+import { CssBoxShadow, CssShadow, CssCalcSize, CssQuad, CssDual, CssSliceInset } from "../Interfaces/css.types";
+import { CssBackgroundImage } from "../Theme";
 interface ParsedShadow {
     offset: UDim2;
     blurRadius: UDim;
     spread: UDim2;
 }
+interface ParsedQuad {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+interface ParsedSliceInset {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
 export declare class CssHelper {
     static parseCssShadow(value: CssShadow): ParsedShadow | undefined;
     private static isZero;
-    static parseCssSize(value: CssSize): UDim;
+    static parseCssSize(value: CssCalcSize): UDim;
+    static parseCssQuad(value: CssQuad): ParsedQuad;
+    private static toRawPixels;
+    static parseCssSliceInset(value: CssSliceInset): ParsedSliceInset;
+    static parseCssDual(value: CssDual): UDim2;
     static ResolveShadow(shadow: CssBoxShadow): React.InstanceProps<UIShadow>;
+    static resolveBackgroundImage(value: Partial<CssBackgroundImage> | undefined): {
+        Image?: string;
+        ImageColor3?: Color3;
+        ImageTransparency?: number;
+        ScaleType?: CssBackgroundImage["size"];
+        SliceCenter?: Rect;
+        SliceScale?: number;
+        TileSize?: UDim2;
+    };
 }
 export {};

package/out/Helpers/css.helper.luau

@@ -86,6 +86,24 @@ do
 		if type(_value) == "number" then
 			return UDim.new(0, value)
 		end
+		-- The one CSS calc() shape supported: "<percent>% - <px>px" /
+		-- "<percent>% + <px>px" (e.g. "100% - 50px") maps directly onto
+		-- UDim(scale, offset) — split on the literal " - "/" + " separator
+		-- and parse each term with this same function. Anything without
+		-- either separator falls through to the single-token parsing below,
+		-- unchanged.
+		local minusParts = string.split(value, " - ")
+		if #minusParts == 2 then
+			local scale = self:parseCssSize(minusParts[1]).Scale
+			local offset = self:parseCssSize(minusParts[2]).Offset
+			return UDim.new(scale, -offset)
+		end
+		local plusParts = string.split(value, " + ")
+		if #plusParts == 2 then
+			local scale = self:parseCssSize(plusParts[1]).Scale
+			local offset = self:parseCssSize(plusParts[2]).Offset
+			return UDim.new(scale, offset)
+		end
 		if string.sub(value, -1) == "%" then
 			local _condition = tonumber(string.sub(value, 1, -2))
 			if _condition == nil then
@@ -108,6 +126,179 @@ do
 		end
 		return UDim.new(0, _condition)
 	end
+	function CssHelper:parseCssQuad(value)
+		local _value = value
+		if type(_value) == "number" then
+			local size = self:parseCssSize(value).Offset
+			return {
+				top = size,
+				right = size,
+				bottom = size,
+				left = size,
+			}
+		end
+		local _exp = string.split(value, " ")
+		-- ▼ ReadonlyArray.filter ▼
+		local _newValue = {}
+		local _callback = function(part)
+			return #part > 0
+		end
+		local _length = 0
+		for _k, _v in _exp do
+			if _callback(_v, _k - 1, _exp) == true then
+				_length += 1
+				_newValue[_length] = _v
+			end
+		end
+		-- ▲ ReadonlyArray.filter ▲
+		local parts = _newValue
+		local _self = self
+		local _condition = parts[1]
+		if _condition == nil then
+			_condition = "0"
+		end
+		local top = _self:parseCssSize(_condition).Offset
+		local _self_1 = self
+		local _condition_1 = parts[2]
+		if _condition_1 == nil then
+			_condition_1 = parts[1]
+			if _condition_1 == nil then
+				_condition_1 = "0"
+			end
+		end
+		local right = _self_1:parseCssSize(_condition_1).Offset
+		local _self_2 = self
+		local _condition_2 = parts[3]
+		if _condition_2 == nil then
+			_condition_2 = parts[1]
+			if _condition_2 == nil then
+				_condition_2 = "0"
+			end
+		end
+		local bottom = _self_2:parseCssSize(_condition_2).Offset
+		local _self_3 = self
+		local _condition_3 = parts[4]
+		if _condition_3 == nil then
+			_condition_3 = parts[2]
+			if _condition_3 == nil then
+				_condition_3 = parts[1]
+				if _condition_3 == nil then
+					_condition_3 = "0"
+				end
+			end
+		end
+		local left = _self_3:parseCssSize(_condition_3).Offset
+		return {
+			top = top,
+			right = right,
+			bottom = bottom,
+			left = left,
+		}
+	end
+	function CssHelper:toRawPixels(value)
+		local _value = value
+		if type(_value) == "number" then
+			return value
+		end
+		if string.sub(value, -1) == "%" then
+			local _condition = tonumber(string.sub(value, 1, -2))
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end
+		if string.sub(value, -2) == "px" then
+			local _condition = tonumber(string.sub(value, 1, -3))
+			if _condition == nil then
+				_condition = 0
+			end
+			return _condition
+		end
+		local _condition = tonumber(value)
+		if _condition == nil then
+			_condition = 0
+		end
+		return _condition
+	end
+	function CssHelper:parseCssSliceInset(value)
+		local _exp = string.split(value, " ")
+		-- ▼ ReadonlyArray.filter ▼
+		local _newValue = {}
+		local _callback = function(part)
+			return #part > 0
+		end
+		local _length = 0
+		for _k, _v in _exp do
+			if _callback(_v, _k - 1, _exp) == true then
+				_length += 1
+				_newValue[_length] = _v
+			end
+		end
+		-- ▲ ReadonlyArray.filter ▲
+		local parts = _newValue
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#parts)
+		local _callback_1 = function(part)
+			return self:toRawPixels(part)
+		end
+		for _k, _v in parts do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, parts)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		local pixels = _newValue_1
+		if #pixels == 2 then
+			return {
+				x1 = pixels[1],
+				y1 = pixels[1],
+				x2 = pixels[2],
+				y2 = pixels[2],
+			}
+		end
+		return {
+			x1 = pixels[1],
+			y1 = pixels[2],
+			x2 = pixels[3],
+			y2 = pixels[4],
+		}
+	end
+	function CssHelper:parseCssDual(value)
+		local _value = value
+		if type(_value) == "number" then
+			local size = self:parseCssSize(value)
+			return UDim2.new(size, size)
+		end
+		local _exp = string.split(value, " ")
+		-- ▼ ReadonlyArray.filter ▼
+		local _newValue = {}
+		local _callback = function(part)
+			return #part > 0
+		end
+		local _length = 0
+		for _k, _v in _exp do
+			if _callback(_v, _k - 1, _exp) == true then
+				_length += 1
+				_newValue[_length] = _v
+			end
+		end
+		-- ▲ ReadonlyArray.filter ▲
+		local parts = _newValue
+		local _self = self
+		local _condition = parts[1]
+		if _condition == nil then
+			_condition = "0"
+		end
+		local x = _self:parseCssSize(_condition)
+		local _self_1 = self
+		local _condition_1 = parts[2]
+		if _condition_1 == nil then
+			_condition_1 = parts[1]
+			if _condition_1 == nil then
+				_condition_1 = "0"
+			end
+		end
+		local y = _self_1:parseCssSize(_condition_1)
+		return UDim2.new(x, y)
+	end
 	function CssHelper:ResolveShadow(shadow)
 		local offset = self:parseCssShadow(shadow.shadow)
 		local _object = {}
@@ -133,6 +324,23 @@ do
 		_object.Transparency = shadow.transparency
 		return _object
 	end
+	function CssHelper:resolveBackgroundImage(value)
+		if value == nil then
+			return {}
+		end
+		local slice = if value.slice ~= nil then self:parseCssSliceInset(value.slice) else nil
+		local _object = {}
+		local _left = "Image"
+		local _image = value.image
+		_object[_left] = if type(_image) == "number" then `rbxassetid://{value.image}` else value.image
+		_object.ImageColor3 = value.tintColor
+		_object.ImageTransparency = value.transparency
+		_object.ScaleType = if slice ~= nil then Enum.ScaleType.Slice else (value.size or Enum.ScaleType.Stretch)
+		_object.SliceCenter = if slice ~= nil then Rect.new(slice.x1, slice.y1, slice.x2, slice.y2) else nil
+		_object.SliceScale = value.sliceScale
+		_object.TileSize = if value.tileSize ~= nil then self:parseCssDual(value.tileSize) else nil
+		return _object
+	end
 end
 return {
 	CssHelper = CssHelper,

package/out/Helpers/index.d.ts

@@ -2,6 +2,7 @@ export * from './breakpoint.helper';
 export * from './color.helper';
 export * from './css.helper';
 export * from './gui.helper';
+export * from './input.helper';
 export * from './size.helper';
 export * from './spacing.helper';
 export * from './typography.helper';

package/out/Helpers/init.luau

@@ -13,6 +13,9 @@ end
 for _k, _v in TS.import(script, script, "gui.helper") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "input.helper") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "size.helper") or {} do
 	exports[_k] = _v
 end

package/out/Helpers/size.helper.d.ts

@@ -1,5 +1,7 @@
 import { Binding } from "@rbxts/react";
-import { CssSize, Breakpoint, ResponsiveValue, SizeElementProps, PositionElementProps } from "../Interfaces/clean.element.props";
+import { CssSize } from "../Interfaces/css.types";
+import { Breakpoint, ResponsiveValue } from "../Interfaces/responsive.types";
+import { SizeElementProps, PositionElementProps } from "../Interfaces/element.props";
 export declare class SizeHelper {
     static GetSize(props: SizeElementProps, defaultSize?: UDim2): UDim2 | Binding<UDim2>;
     static GetPosition(props: PositionElementProps): UDim2 | Binding<UDim2>;