@rbxts/react-clean-ui 1.0.36 → 1.1.0

package/out/Helpers/size.helper.luau

@@ -31,7 +31,8 @@ do
 				width = props.width
 			end
 		end
-		return UDim2.new(self:toUDim(width), self:toUDim(props.height))
+		local height = if props.height == "Auto" then 0 else props.height
+		return UDim2.new(self:toUDim(width), self:toUDim(height))
 	end
 	function SizeHelper:GetPosition(props)
 		if props.Position ~= nil then
@@ -62,25 +63,25 @@ do
 		if props.AutomaticSize ~= nil then
 			return props.AutomaticSize
 		end
-		if props.width == "Auto" then
-			return Enum.AutomaticSize.X
-		end
+		-- "Auto" behaves like an unset dimension for the purposes of deciding
+		-- which axes get AutomaticSize, but still forces that axis to 0 in GetSize.
+		local width = if props.width == "Auto" then nil else props.width
+		local height = if props.height == "Auto" then nil else props.height
 		local _condition = props.Size ~= nil
 		if not _condition then
-			local _condition_1 = props.width
+			local _condition_1 = width
 			if _condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1 then
-				_condition_1 = props.height
+				_condition_1 = height
 			end
 			_condition = _condition_1
 		end
 		if _condition ~= 0 and _condition == _condition and _condition ~= "" and _condition then
 			return Enum.AutomaticSize.None
 		end
-		if props.width == nil and props.height == nil and defaultValue == nil then
+		if width == nil and height == nil and defaultValue == nil then
 			return Enum.AutomaticSize.XY
 		end
-		local _value = props.width
-		if not (_value ~= 0 and _value == _value and _value ~= "" and _value) then
+		if not (width ~= 0 and width == width and width ~= "" and width) then
 			return Enum.AutomaticSize.X
 		end
 		return if defaultValue ~= nil then defaultValue else Enum.AutomaticSize.Y

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

@@ -1,7 +1,8 @@
-import { PaddingProps, ResolvedPadding, ScaleSize, ScaleSizeValue } from "../Interfaces";
-import { CleanTheme } from "../Theme";
+import { PaddingProps, ResolvedPadding, ScaleSize, ScaleSizeValue, ScaledCssPadding } from "../Interfaces";
+import { ThemeTemplate } from "../Theme";
 export declare class SpacingHelper {
-    static GetResolvedPadding(theme: CleanTheme, props: PaddingProps, component?: ScaleSizeValue<number>): ResolvedPadding;
-    static GetPadding(theme: CleanTheme, spacing?: ScaleSize | "None", component?: ScaleSizeValue<number>): number;
+    static GetPadding(theme: ThemeTemplate, spacing?: ScaleSize | "None", component?: ScaleSizeValue<number>): number;
+    static GetResolvedPadding(theme: ThemeTemplate, props: PaddingProps, componentSpacing?: ScaleSizeValue<number>, componentPadding?: ScaledCssPadding, defaultSpacing?: ScaleSize): ResolvedPadding;
+    static GetExplicitPadding(componentPadding: ScaledCssPadding | undefined, key: ScaleSize): ResolvedPadding | undefined;
     static ResolveNumberPadding(value: number): ResolvedPadding;
 }

package/out/Helpers/spacing.helper.luau

@@ -1,4 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local CssHelper = TS.import(script, script.Parent, "css.helper").CssHelper
 local SpacingHelper
 do
 	SpacingHelper = setmetatable({}, {
@@ -13,35 +15,117 @@ do
 	end
 	function SpacingHelper:constructor()
 	end
-	function SpacingHelper:GetResolvedPadding(theme, props, component)
-		local amount = self:GetPadding(theme, props.spacing, component)
-		return {
-			top = if props.top then self:GetPadding(theme, props.top) else amount,
-			bottom = if props.bottom then self:GetPadding(theme, props.bottom) else amount,
-			left = if props.left then self:GetPadding(theme, props.left) else amount,
-			right = if props.right then self:GetPadding(theme, props.right) else amount,
-		}
-	end
 	function SpacingHelper:GetPadding(theme, spacing, component)
 		if spacing == "None" then
 			return 0
 		end
-		local resolveSpacing = if spacing ~= nil then spacing else theme.default.spacing
-		local _result
-		if component ~= nil then
-			local _condition = component[resolveSpacing]
+		local key = spacing or theme.default.spacing
+		local _result = component
+		if _result ~= nil then
+			_result = _result[key]
+		end
+		local _condition = _result
+		if _condition == nil then
+			_condition = theme.spacing[key]
 			if _condition == nil then
 				_condition = 0
 			end
-			_result = _condition
+		end
+		return _condition
+	end
+	function SpacingHelper:GetResolvedPadding(theme, props, componentSpacing, componentPadding, defaultSpacing)
+		if props.resolvedPadding ~= nil then
+			return props.resolvedPadding
+		end
+		local isNone = props.spacing == "None"
+		local key = if props.spacing ~= nil and props.spacing ~= "None" then props.spacing else (defaultSpacing or theme.default.spacing)
+		-- tier 3: a scale-indexed map picks the quad for the active key
+		-- (falling through to tiers 1/2 if that key isn't defined in the
+		-- map); a plain quad applies regardless of key.
+		local _result
+		if isNone or componentPadding == nil then
+			_result = nil
+		else
+			local _componentPadding = componentPadding
+			_result = if type(_componentPadding) == "table" then componentPadding[key] else componentPadding
+		end
+		local quadForKey = _result
+		local base = if quadForKey ~= nil then CssHelper:parseCssQuad(quadForKey) else self:ResolveNumberPadding(if isNone then 0 else self:GetPadding(theme, key, componentSpacing))
+		local instanceQuad = if props.padding ~= nil then CssHelper:parseCssQuad(props.padding) else nil
+		local _object = {}
+		local _left = "top"
+		local _result_1
+		if props.top ~= nil then
+			_result_1 = self:GetPadding(theme, props.top, componentSpacing)
 		else
-			local _condition = theme.spacing[resolveSpacing]
+			local _result_2 = instanceQuad
+			if _result_2 ~= nil then
+				_result_2 = _result_2.top
+			end
+			local _condition = _result_2
 			if _condition == nil then
-				_condition = 0
+				_condition = base.top
+			end
+			_result_1 = _condition
+		end
+		_object[_left] = _result_1
+		local _left_1 = "bottom"
+		local _result_2
+		if props.bottom ~= nil then
+			_result_2 = self:GetPadding(theme, props.bottom, componentSpacing)
+		else
+			local _result_3 = instanceQuad
+			if _result_3 ~= nil then
+				_result_3 = _result_3.bottom
+			end
+			local _condition = _result_3
+			if _condition == nil then
+				_condition = base.bottom
+			end
+			_result_2 = _condition
+		end
+		_object[_left_1] = _result_2
+		local _left_2 = "left"
+		local _result_3
+		if props.left ~= nil then
+			_result_3 = self:GetPadding(theme, props.left, componentSpacing)
+		else
+			local _result_4 = instanceQuad
+			if _result_4 ~= nil then
+				_result_4 = _result_4.left
+			end
+			local _condition = _result_4
+			if _condition == nil then
+				_condition = base.left
 			end
-			_result = _condition
+			_result_3 = _condition
+		end
+		_object[_left_2] = _result_3
+		local _left_3 = "right"
+		local _result_4
+		if props.right ~= nil then
+			_result_4 = self:GetPadding(theme, props.right, componentSpacing)
+		else
+			local _result_5 = instanceQuad
+			if _result_5 ~= nil then
+				_result_5 = _result_5.right
+			end
+			local _condition = _result_5
+			if _condition == nil then
+				_condition = base.right
+			end
+			_result_4 = _condition
+		end
+		_object[_left_3] = _result_4
+		return _object
+	end
+	function SpacingHelper:GetExplicitPadding(componentPadding, key)
+		if componentPadding == nil then
+			return nil
 		end
-		return _result
+		local _componentPadding = componentPadding
+		local quad = if type(_componentPadding) == "table" then componentPadding[key] else componentPadding
+		return if quad ~= nil then CssHelper:parseCssQuad(quad) else nil
 	end
 	function SpacingHelper:ResolveNumberPadding(value)
 		return {

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

@@ -1,7 +1,7 @@
 import { ScaleSize } from "../Interfaces";
-import { TypographyStyle, ScaledTypographyStyle, CleanTheme } from "../Theme";
+import { TypographyStyle, ScaledTypographyStyle, ThemeTemplate } from "../Theme";
 export declare class TypographyHelper {
-    static getTypography(theme: CleanTheme, scale?: ScaleSize, component?: Partial<TypographyStyle> | ScaledTypographyStyle): TypographyStyle;
+    static getTypography(theme: ThemeTemplate, scale?: ScaleSize, component?: Partial<TypographyStyle> | ScaledTypographyStyle): TypographyStyle;
     private static getClosestTypography;
     private static isScaledTypographyStyle;
 }

package/out/Interfaces/css.types.d.ts

@@ -0,0 +1,30 @@
+import { ScaleSizeValue } from "./responsive.types";
+export type CssUnit = "px" | "%";
+export type CssSize = "Auto" | number | `${number}` | `${number}${CssUnit}`;
+export type CssCalcSize = CssSize | `${number}% - ${number}px` | `${number}% + ${number}px`;
+export type CssBreakpoint = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export type CssBreakpointSize = {
+    xs?: CssSize;
+    sm?: CssSize;
+    md?: CssSize;
+    lg?: CssSize;
+    xl?: CssSize;
+};
+export type CssDual = CssSize | `${CssSize} ${CssSize}`;
+export type CssQuad = CssDual | `${CssSize} ${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize} ${CssSize}`;
+export type CssShadow = CssQuad;
+export type CssSliceInset = `${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize} ${CssSize}`;
+export type CssBoxShadow = {
+    shadow: CssShadow;
+    color: Color3;
+    transparency: number;
+};
+export type CssPadding = CssQuad;
+export type ScaledCssPadding = CssPadding | ScaleSizeValue<CssPadding>;
+export type ResponsiveCssSize = CssSize | CssBreakpointSize;

package/out/Interfaces/css.types.luau

@@ -0,0 +1,21 @@
+-- Compiled with roblox-ts v3.0.0
+-- The one CSS calc() shape supported on top of CssSize: a percent term
+-- plus/minus a pixel term (e.g. "100% - 50px"), which maps directly onto
+-- UDim(scale, offset) — no general calc() parser needed for anything beyond
+-- this two-term form. Deliberately kept as its own type rather than folded
+-- directly into CssSize: CssSize is composed multiple times over in CssQuad/
+-- CssDual (a 4-term CssQuad is `${CssSize} ${CssSize} ${CssSize} ${CssSize}`),
+-- so widening CssSize itself multiplies out through every one of those
+-- combinations — doing so was observed to blow past TypeScript's template-
+-- literal complexity limit ("union type that is too complex to represent")
+-- at unrelated call sites that spread a large props object containing
+-- several CssQuad-shaped fields (e.g. Button.tsx's `<BoxShadow {...props} />`).
+-- Use CssCalcSize only where a calc() term is actually needed (currently
+-- just CssPosition.width) rather than everywhere CssSize appears.
+-- absolute pixel corner coordinates for Rect.new(minX, minY, maxX, maxY)-style slicing,
+-- e.g. Roblox's SliceCenter — not a CSS border-image-slice edge-inset shorthand, since
+-- Roblox has no intrinsic-image-size equivalent to derive corners from an inset alone
+-- A CssPadding quad, or a scale-key-indexed map of quads (e.g. a component's
+-- theme.components.X.padding tier, which can pick a different quad shape per
+-- spacing scale key the same way theme.components.X.spacing does for the
+-- numeric tier).

package/out/Interfaces/element.props.d.ts

@@ -0,0 +1,61 @@
+import { Binding } from "@rbxts/react";
+import { IconName } from "./icon";
+import { CssSize, CssShadow, CssPadding, ResponsiveCssSize } from "./css.types";
+import { ScaleSize, BreakpointValue } from "./responsive.types";
+import { Intent } from "./semantics";
+export interface ZIndexElementProps {
+    ZIndex?: number | Binding<number> | undefined;
+}
+export interface BackgroundElementProps {
+    BackgroundTransparency?: number | Binding<number> | undefined;
+    BackgroundColor3?: Color3 | Binding<Color3> | undefined;
+}
+export interface SizeElementProps {
+    Size?: UDim2 | Binding<UDim2>;
+    width?: ResponsiveCssSize;
+    height?: CssSize;
+    AutomaticSize?: Enum.AutomaticSize | Binding<Enum.AutomaticSize> | "None" | "X" | "Y" | "XY" | undefined;
+}
+export interface ScalableElementProps {
+    scale?: ScaleSize;
+}
+export interface PositionElementProps {
+    Position?: UDim2 | Binding<UDim2>;
+    AnchorPoint?: Vector2 | Binding<Vector2> | undefined;
+    center?: boolean;
+    top?: CssSize;
+    left?: CssSize;
+    right?: CssSize;
+    bottom?: CssSize;
+}
+export interface IntentElementProps {
+    intent?: Intent;
+}
+export interface SpacedElementProps {
+    spacing?: ScaleSize | "None";
+}
+export interface BreakPointElementProps {
+    breakpoints?: BreakpointValue<number>;
+}
+export interface ShadowElementProps {
+    "box-shadow"?: CssShadow;
+    "box-shadow-color"?: Color3;
+    "box-shadow-transparency"?: number;
+}
+export interface IconElementProps {
+    icon?: IconName;
+}
+export interface PaddingProps extends SpacedElementProps {
+    right?: ScaleSize | "None";
+    left?: ScaleSize | "None";
+    top?: ScaleSize | "None";
+    bottom?: ScaleSize | "None";
+    padding?: CssPadding;
+    resolvedPadding?: ResolvedPadding;
+}
+export interface ResolvedPadding {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}

package/out/Interfaces/element.props.luau

@@ -0,0 +1 @@
+-- Compiled with roblox-ts v3.0.0

package/out/Interfaces/index.d.ts

@@ -1,3 +1,5 @@
-export * from './clean.element.props';
-export * from './icon';
-export * from './userinput';
+export type * from './css.types';
+export * from './responsive.types';
+export type * from './element.props';
+export type * from './semantics';
+export type * from './icon';

package/out/Interfaces/init.luau

@@ -1,13 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-for _k, _v in TS.import(script, script, "clean.element.props") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "icon") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "userinput") or {} do
+for _k, _v in TS.import(script, script, "responsive.types") or {} do
 	exports[_k] = _v
 end
 return exports

package/out/Interfaces/responsive.types.d.ts

@@ -0,0 +1,26 @@
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+export declare const ScaleSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+export type ScaleSize = typeof ScaleSizes[number];
+export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface ResponsiveGridSpan {
+    xs?: GridSpan;
+    sm?: GridSpan;
+    md?: GridSpan;
+    lg?: GridSpan;
+    xl?: GridSpan;
+}
+export type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
+export interface BreakpointValue<T> {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+}
+export interface ScaleSizeValue<T> {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+}

package/out/Interfaces/semantics.d.ts

@@ -0,0 +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";

package/out/Interfaces/semantics.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/Providers/app.provider.d.ts

@@ -1,8 +1,8 @@
 import React from "@rbxts/react";
-import { CleanTheme } from "../Theme";
+import { ThemeTemplate } from "../Theme";
 interface CleanUiProviderProps {
     children?: React.ReactNode;
-    theme: CleanTheme;
+    theme: ThemeTemplate;
     toasts?: boolean;
 }
 export declare function CleanUiProvider({ children, theme, toasts }: CleanUiProviderProps): React.JSX.Element;

package/out/Providers/theme.provider.d.ts

@@ -1,7 +1,7 @@
 import React from "@rbxts/react";
-import { CleanTheme } from "../Theme";
+import { ThemeTemplate } from "../Theme";
 interface ThemeProviderProps {
-    theme: CleanTheme;
+    theme: ThemeTemplate;
     children?: React.ReactNode;
 }
 export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;

package/out/Theme/index.d.ts

@@ -1,4 +1,5 @@
 export type * from './theme.template';
+export type * from './theme.style';
 export * from './theme.factory';
 export * from './icons.default';
 export * from './themes/';

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

@@ -1,6 +1,6 @@
-import { CleanTheme } from "./theme.template";
+import { ThemeTemplate } from "./theme.template";
 export type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
-export declare function createTheme(overrides?: DeepPartial<CleanTheme>): CleanTheme;
-export declare function extendTheme(baseTheme: CleanTheme, overrides: DeepPartial<CleanTheme>): CleanTheme;
+export declare function createTheme(overrides?: DeepPartial<ThemeTemplate>): ThemeTemplate;
+export declare function extendTheme(baseTheme: ThemeTemplate, overrides: DeepPartial<ThemeTemplate>): ThemeTemplate;

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

@@ -0,0 +1,48 @@
+import { Binding } from "@rbxts/react";
+import { ScaleSize, CssShadow, ButtonFlag, CssDual, CssSliceInset, CssSize, CssCalcSize } from "../Interfaces/";
+export interface TypographyStyle {
+    font: Enum.Font;
+    size: Enum.FontSize;
+    weight?: Enum.FontWeight;
+    lineHeight?: number;
+    letterSpacing?: number;
+    color?: Color3;
+    transparency?: number;
+}
+export type ScaledTypographyStyle = Partial<Record<ScaleSize, Partial<TypographyStyle>>>;
+export interface IntentScheme {
+    textColor: Color3;
+    backgroundColor: Color3;
+    borderColor: Color3;
+    backgroundTransparency?: number;
+    boxShadow?: CssShadow;
+    typography?: Partial<TypographyStyle>;
+    backgroundImage?: Partial<CssBackgroundImage>;
+}
+export interface IntentColors extends Partial<Record<ButtonFlag, IntentScheme>> {
+    default: IntentScheme;
+    hover?: IntentScheme;
+    focus?: IntentScheme;
+}
+export type InlineIntentColors = {
+    [State in keyof IntentColors]?: Partial<NonNullable<IntentColors[State]>>;
+};
+export interface CssBackgroundImage {
+    image: string | number;
+    slice?: CssSliceInset;
+    size?: Enum.ScaleType | "Stretch" | "Slice" | "Tile" | "Fit" | "Crop" | Binding<Enum.ScaleType>;
+    transparency?: number;
+    tintColor?: Color3;
+    tileSize?: CssDual;
+    sliceScale?: number;
+}
+export interface CssPosition {
+    position?: "static" | "absolute";
+    top?: CssSize;
+    left?: CssSize;
+    right?: CssSize;
+    bottom?: CssSize;
+    center?: boolean | "x" | "y";
+    zIndex?: number;
+    width?: CssCalcSize;
+}

package/out/Theme/theme.style.luau

@@ -0,0 +1 @@
+-- Compiled with roblox-ts v3.0.0

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

@@ -1,28 +1,6 @@
-import { CssShadow, CssSize, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, ButtonFlag, PositionElementProps, CssBoxShadow } from "../Interfaces/";
-export interface TypographyStyle {
-    font: Enum.Font;
-    size: Enum.FontSize;
-    weight?: Enum.FontWeight;
-    lineHeight?: number;
-}
-export type ScaledTypographyStyle = Partial<Record<ScaleSize, Partial<TypographyStyle>>>;
-export interface IntentScheme {
-    textColor: Color3;
-    backgroundColor: Color3;
-    borderColor: Color3;
-    backgroundTransparency?: number;
-    boxShadow?: CssShadow;
-    typography?: Partial<TypographyStyle>;
-}
-export interface IntentColors extends Partial<Record<ButtonFlag, IntentScheme>> {
-    default: IntentScheme;
-    hover?: IntentScheme;
-    focus?: IntentScheme;
-}
-export type InlineIntentColors = {
-    [State in keyof IntentColors]?: Partial<NonNullable<IntentColors[State]>>;
-};
-export interface CleanTheme {
+import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, ScaleSizeValue, ScaleSize, Intent, IconSet, TextVariant, PositionElementProps, CssBoxShadow } from "../Interfaces/";
+import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition } from "./theme.style";
+export interface ThemeTemplate {
     colors: {
         intents: Record<Intent, IntentColors>;
     };
@@ -70,7 +48,10 @@ export interface CleanTheme {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
             boxShadow?: CssShadow;
+            backgroundImage?: CssBackgroundImage;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
         button: {
@@ -81,16 +62,22 @@ export interface CleanTheme {
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
+        increment: {
+            button?: Partial<ThemeTemplate["components"]["button"]>;
+        };
         input: {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            backgroundImage?: CssBackgroundImage;
+            placeholder?: Partial<TypographyStyle> | ScaledTypographyStyle;
         };
         select: {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            backgroundImage?: CssBackgroundImage;
             dropDownBackgroundColor: Color3;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -99,27 +86,36 @@ export interface CleanTheme {
         checkbox: {
             borderColor: Color3;
             borderThickness: number;
+            borderTransparency?: number;
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
             spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
+            backgroundImage?: CssBackgroundImage;
         };
         tabs: {
             borderColor: Color3;
             backgroundColor: Color3;
+            backgroundImage?: CssBackgroundImage;
             borderThickness: number;
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
             list: {
                 borderColor?: Color3;
                 backgroundColor?: Color3;
+                backgroundTransparency?: number;
                 borderThickness: number;
                 cornerRadius: CssSize;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
+                backgroundImage?: CssBackgroundImage;
             };
             button: {
                 borderThickness: number;
                 cornerRadius: CssSize;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 boxShadow?: CssShadow;
                 typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
@@ -132,6 +128,7 @@ export interface CleanTheme {
             spacing?: ScaleSizeValue<number>;
             header: {
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
                 indicatorSize: number;
@@ -139,6 +136,7 @@ export interface CleanTheme {
             };
             content: {
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 backgroundColor: Color3;
                 backgroundTransparency: number;
             };
@@ -150,12 +148,22 @@ export interface CleanTheme {
             borderThickness: number;
             cornerRadius: CssSize;
             header: {
+                borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
+                position?: CssPosition;
             };
             footer: {
+                borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
+                position?: CssPosition;
+            };
+            body?: {
+                spacing?: ScaleSizeValue<number>;
+                padding?: ScaledCssPadding;
             };
         };
         slider: {
@@ -181,7 +189,7 @@ export interface CleanTheme {
                 cornerRadius: CssSize;
                 backgroundColor: Color3;
                 backgroundTransparency: number;
-                aspectRation?: number;
+                aspectRatio?: number;
             };
         };
         toast: {

package/out/Theme/themes/dark.theme.d.ts

@@ -1 +1 @@
-export declare const DarkTheme: import("..").CleanTheme;
+export declare const DarkTheme: import("..").ThemeTemplate;