@rbxts/react-clean-ui 1.0.19 → 1.0.38

package/out/Theme/themes/wooden.theme.luau

@@ -0,0 +1,443 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createTheme = TS.import(script, script.Parent.Parent, "theme.factory").createTheme
+local font = Enum.Font.PatrickHand
+local WoodenTheme = createTheme({
+	typography = {
+		display = {
+			font = font,
+			size = Enum.FontSize.Size60,
+			letterSpacing = 5,
+		},
+		title = {
+			font = font,
+			size = Enum.FontSize.Size48,
+			letterSpacing = 3,
+		},
+		heading = {
+			font = font,
+			size = Enum.FontSize.Size32,
+			letterSpacing = 2,
+		},
+		body = {
+			font = font,
+			size = Enum.FontSize.Size24,
+		},
+		label = {
+			font = font,
+			size = Enum.FontSize.Size18,
+		},
+		caption = {
+			font = font,
+			size = Enum.FontSize.Size14,
+		},
+	},
+	colors = {
+		intents = {
+			primary = {
+				default = {
+					textColor = Color3.fromHex("#FFF7CF"),
+				},
+			},
+		},
+	},
+	components = {
+		button = {
+			cornerRadius = 0,
+			backgroundTransparency = 1,
+			borderThickness = 0,
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						backgroundImage = {
+							image = 92016395170536,
+							slice = "10 5 240 40",
+							tintColor = Color3.fromHex("#A16B30"),
+						},
+					},
+					hover = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#BA854A"),
+						},
+					},
+					disabled = {
+						textColor = Color3.fromHex("#a4a29f"),
+						backgroundImage = {
+							transparency = 0.3,
+						},
+					},
+				},
+				success = {
+					default = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#63ff00"),
+						},
+					},
+					hover = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#29ff52"),
+						},
+					},
+				},
+				info = {
+					default = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#00bfff"),
+						},
+					},
+					hover = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#29d4ff"),
+						},
+					},
+				},
+				warning = {
+					default = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#ffbf00"),
+						},
+					},
+					hover = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#ffd429"),
+						},
+					},
+				},
+				danger = {
+					default = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#ff0000"),
+						},
+					},
+					hover = {
+						backgroundImage = {
+							tintColor = Color3.fromHex("#ff2929"),
+						},
+					},
+				},
+			},
+		},
+		tabs = {
+			list = {
+				borderThickness = 0,
+				cornerRadius = 0,
+				backgroundTransparency = 1,
+				backgroundImage = {
+					image = 92016395170536,
+					slice = "10 5 240 40",
+					tintColor = Color3.fromHex("#5C3A18"),
+				},
+			},
+			button = {
+				cornerRadius = 0,
+				borderThickness = 0,
+				intents = {
+					primary = {
+						default = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								image = 92016395170536,
+								slice = "10 5 240 40",
+								tintColor = Color3.fromHex("#A16B30"),
+							},
+						},
+						hover = {
+							textColor = Color3.fromHex("#d3cba3"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#BA854A"),
+							},
+						},
+						focus = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#7A4A20"),
+							},
+						},
+					},
+					success = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#63ff00"),
+							},
+						},
+						hover = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#29ff52"),
+							},
+						},
+					},
+					info = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#00bfff"),
+							},
+						},
+						hover = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#29d4ff"),
+							},
+						},
+					},
+					warning = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#ffbf00"),
+							},
+						},
+						hover = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#ffd429"),
+							},
+						},
+					},
+					danger = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#ff0000"),
+							},
+						},
+						hover = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#ff2929"),
+							},
+						},
+					},
+				},
+			},
+		},
+		box = {
+			borderThickness = 0,
+			boxShadow = 0,
+			cornerRadius = 0,
+			backgroundTransparency = 1,
+			padding = "35px 40px 40px 40px",
+			backgroundImage = {
+				image = 89050878990049,
+				slice = "54 55 969 565",
+			},
+		},
+		input = {
+			cornerRadius = 0,
+			borderThickness = 0,
+			backgroundImage = {
+				image = 92016395170536,
+				slice = "10 5 248 44",
+				tintColor = Color3.fromHex("#295896"),
+			},
+			placeholder = {
+				color = Color3.fromHex("#546b8a"),
+			},
+		},
+		card = {
+			borderThickness = 0,
+			cornerRadius = 0,
+			header = {
+				intents = {
+					primary = {
+						default = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							borderColor = Color3.fromHex("#3D2712"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								image = 92016395170536,
+								slice = "10 5 240 40",
+								tintColor = Color3.fromHex("#7A4A20"),
+							},
+						},
+					},
+					success = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#4E6A24"),
+							},
+						},
+					},
+					info = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#2C5270"),
+							},
+						},
+					},
+					warning = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#A67A20"),
+							},
+						},
+					},
+					danger = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#7A3220"),
+							},
+						},
+					},
+				},
+				position = {
+					position = "absolute",
+					center = "x",
+					top = "-10px",
+					zIndex = 2,
+				},
+			},
+			footer = {
+				spacing = {
+					xs = 1,
+					sm = 2,
+					md = 4,
+					lg = 6,
+					xl = 6,
+				},
+				intents = {
+					primary = {
+						default = {
+							textColor = Color3.fromHex("#FFF7CF"),
+							borderColor = Color3.fromHex("#3D2712"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								image = 92016395170536,
+								slice = "10 5 240 40",
+								tintColor = Color3.fromHex("#7A4A20"),
+							},
+						},
+					},
+					success = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#4E6A24"),
+							},
+						},
+					},
+					info = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#2C5270"),
+							},
+						},
+					},
+					warning = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#A67A20"),
+							},
+						},
+					},
+					danger = {
+						default = {
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#7A3220"),
+							},
+						},
+					},
+				},
+				position = {
+					position = "absolute",
+					bottom = "-10px",
+					left = "50px",
+					right = "50px",
+					zIndex = 2,
+				},
+			},
+		},
+		select = {
+			cornerRadius = 0,
+			borderThickness = 0,
+			dropDownBackgroundColor = Color3.fromHex("#295896"),
+			backgroundImage = {
+				image = 92016395170536,
+				slice = "10 5 248 44",
+				tintColor = Color3.fromHex("#295896"),
+			},
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						backgroundColor = Color3.fromHex("#295896"),
+					},
+					hover = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						backgroundColor = Color3.fromHex("#376FAF"),
+					},
+					focus = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						backgroundColor = Color3.fromHex("#1F477D"),
+					},
+				},
+			},
+		},
+		increment = {
+			button = {
+				intents = {
+					primary = {
+						default = {
+							backgroundImage = {
+								tintColor = Color3.fromHex("#6c6c6c"),
+							},
+						},
+						hover = {
+							backgroundImage = {
+								tintColor = Color3.fromHex("#847f7f"),
+							},
+						},
+					},
+				},
+			},
+		},
+		checkbox = {
+			cornerRadius = 4,
+			borderThickness = 3,
+			borderTransparency = 0,
+			backgroundImage = {
+				image = 84686427750506,
+				tintColor = Color3.fromHex("#A16B30"),
+			},
+			intents = {
+				primary = {
+					default = {
+						borderColor = Color3.fromHex("#3D2712"),
+						textColor = Color3.fromHex("#FFF7CF"),
+					},
+				},
+				success = {
+					default = {
+						borderColor = Color3.fromHex("#311f0e"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#00bfff"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#ff0000"),
+					},
+				},
+			},
+		},
+	},
+})
+return {
+	WoodenTheme = WoodenTheme,
+}

package/out/index.d.ts

@@ -1,8 +1,8 @@
-export * from "./Components";
-export * from "./Helpers";
-export * from "./Helpers/create-ui-story";
-export * from "./Theme";
-export * from "./Interfaces";
-export * from "./Providers";
-export * from "./Providers/app.provider";
-export * from "./Contexts";
+export * from './Components';
+export * from './Helpers';
+export * from './Helpers/create-ui-story';
+export * from './Theme';
+export * from './Interfaces';
+export * from './Providers';
+export * from './Providers/app.provider';
+export * from './Contexts';

package/package.json

@@ -1,27 +1,41 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.0.19",
-  "description": "",
+  "version": "1.0.38",
+  "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {
     "build": "rbxtsc",
     "watch": "rbxtsc -w",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "screenshots": "node scripts/generate-screenshots.js",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "rbxts",
+    "react",
+    "ui",
+    "clean",
+    "shadercloud"
+  ],
+  "author": "ShaderCloud",
   "license": "ISC",
   "type": "commonjs",
   "types": "out/index.d.ts",
   "files": [
     "out",
-    "!**/*.tsbuildinfo"
+    "!**/*.tsbuildinfo",
+    "!out/Tests/**"
   ],
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "@rbxts/compiler-types": "^3.0.0-types.0",
+    "@rbxts/lunit": "^4.0.2",
+    "@rbxts/react-screenshot-plugin": "^0.1.6",
     "@rbxts/types": "^1.0.938",
     "@typescript-eslint/eslint-plugin": "^8.63.0",
     "@typescript-eslint/parser": "^8.63.0",

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

@@ -1,114 +0,0 @@
-import { Binding } from "@rbxts/react";
-import { IconName } from "./icon";
-export type ButtonFlag = "default" | "hover" | "focus";
-export type CssUnit = "px" | "%";
-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 TextVariant = "display" | "title" | "heading" | "body" | "label" | "caption";
-export type Intent = "primary" | "success" | "warning" | "danger" | "info";
-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;
-}
-export type CssSize = "Auto" | number | `${number}` | `${number}${CssUnit}`;
-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 CssQuad = CssSize | `${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize}` | `${CssSize} ${CssSize} ${CssSize} ${CssSize}`;
-export type CssShadow = CssQuad;
-export type CssBoxShadow = {
-    shadow: CssShadow;
-    color: Color3;
-    transparency: number;
-};
-export type CssPadding = CssQuad;
-export type ResponsiveCssSize = CssSize | CssBreakpointSize;
-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?: CssSize | boolean;
-    top?: CssSize;
-    left?: CssSize;
-    right?: CssSize;
-    bottom?: CssSize;
-}
-export interface IntentElementProps {
-    intent?: Intent;
-}
-export interface CleanElementProps extends SizeElementProps, PositionElementProps {
-}
-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;
-}