@rbxts/react-clean-ui 1.0.19 → 1.0.38

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>;

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,7 @@
 import { PaddingProps, ResolvedPadding, ScaleSize, ScaleSizeValue } from "../Interfaces";
-import { CleanTheme } from "../Theme";
+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 GetResolvedPadding(theme: ThemeTemplate, props: PaddingProps, component?: ScaleSizeValue<number>): ResolvedPadding;
+    static GetPadding(theme: ThemeTemplate, spacing?: ScaleSize | "None", component?: ScaleSizeValue<number>): number;
     static ResolveNumberPadding(value: number): ResolvedPadding;
 }

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,28 @@
+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 ResponsiveCssSize = CssSize | CssBreakpointSize;

package/out/Interfaces/css.types.luau

@@ -0,0 +1,17 @@
+-- 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

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 './css.types';
+export * from './responsive.types';
+export * from './element.props';
+export * from './semantics';
 export * from './icon';
-export * from './userinput';

package/out/Interfaces/init.luau

@@ -1,13 +1,19 @@
 -- 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
+for _k, _v in TS.import(script, script, "css.types") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "icon") or {} do
+for _k, _v in TS.import(script, script, "responsive.types") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "element.props") 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, "semantics") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "icon") 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, CssPadding, 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,9 @@ export interface CleanTheme {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            padding?: CssPadding;
             boxShadow?: CssShadow;
+            backgroundImage?: CssBackgroundImage;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
         button: {
@@ -81,16 +61,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,9 +85,11 @@ export interface CleanTheme {
         checkbox: {
             borderColor: Color3;
             borderThickness: number;
+            borderTransparency?: number;
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
             spacing?: ScaleSizeValue<number>;
+            backgroundImage?: CssBackgroundImage;
         };
         tabs: {
             borderColor: Color3;
@@ -112,9 +100,11 @@ export interface CleanTheme {
             list: {
                 borderColor?: Color3;
                 backgroundColor?: Color3;
+                backgroundTransparency?: number;
                 borderThickness: number;
                 cornerRadius: CssSize;
                 spacing?: ScaleSizeValue<number>;
+                backgroundImage?: CssBackgroundImage;
             };
             button: {
                 borderThickness: number;
@@ -125,16 +115,44 @@ export interface CleanTheme {
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
             };
         };
+        accordion: {
+            borderColor: Color3;
+            borderThickness: number;
+            cornerRadius: CssSize;
+            spacing?: ScaleSizeValue<number>;
+            header: {
+                spacing?: ScaleSizeValue<number>;
+                typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+                intents?: Partial<Record<Intent, InlineIntentColors>>;
+                indicatorSize: number;
+                indicatorColor: Color3;
+            };
+            content: {
+                spacing?: ScaleSizeValue<number>;
+                backgroundColor: Color3;
+                backgroundTransparency: number;
+            };
+            animation: {
+                duration: number;
+            };
+        };
         card: {
             borderThickness: number;
             cornerRadius: CssSize;
             header: {
+                borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
+                position?: CssPosition;
             };
             footer: {
+                borderThickness?: number;
                 spacing?: ScaleSizeValue<number>;
                 intents?: Partial<Record<Intent, InlineIntentColors>>;
+                position?: CssPosition;
+            };
+            body?: {
+                padding?: CssPadding;
             };
         };
         slider: {
@@ -160,7 +178,7 @@ export interface CleanTheme {
                 cornerRadius: CssSize;
                 backgroundColor: Color3;
                 backgroundTransparency: number;
-                aspectRation?: number;
+                aspectRatio?: number;
             };
         };
         toast: {
@@ -188,18 +206,54 @@ export interface CleanTheme {
             cornerRadius: CssSize;
             intents?: Partial<Record<Intent, Partial<IntentScheme>>>;
         };
-        pie: {
+        charts: {
             colors: Color3[];
-            boxShadow?: CssBoxShadow;
-            hoverDarken: number;
-            labels: {
+            pie: {
+                boxShadow?: CssBoxShadow;
+                hoverDarken: number;
+                labels: {
+                    spacing?: ScaleSizeValue<number>;
+                    backgroundColor?: Color3;
+                    backgroundTransparency?: number;
+                    typography?: Partial<TypographyStyle>;
+                    borderColor?: Color3;
+                    borderThickness?: number;
+                    cornerRadius?: CssSize;
+                };
+            };
+            bar: {
                 spacing?: ScaleSizeValue<number>;
-                backgroundColor?: Color3;
-                backgroundTransparency?: number;
-                typography?: Partial<TypographyStyle>;
-                borderColor?: Color3;
-                borderThickness?: number;
-                cornerRadius?: CssSize;
+                unstackedTransparency: number;
+                borderColor: Color3;
+                borderThickness: number;
+                cornerRadius: CssSize;
+                tweenTime: number;
+                axis: {
+                    color: Color3;
+                    transparency: number;
+                    thickness: number;
+                };
+                xAxis: {
+                    size: number;
+                    spacing: number;
+                    tickColor: Color3;
+                    tickTransparency: number;
+                    tickThickness: number;
+                    tickSize: number;
+                };
+                yAxis: {
+                    size: number;
+                    spacing: number;
+                    tickColor: Color3;
+                    tickTransparency: number;
+                    tickThickness: number;
+                    tickSize: number;
+                };
+                gridLines: {
+                    color: Color3;
+                    transparency: number;
+                    thickness: number;
+                };
             };
         };
     };

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

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