@rbxts/react-clean-ui 1.2.5 → 1.2.6

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

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { BreakPointElementProps } from "../../Interfaces/";
+export interface BreakpointProviderProps extends BreakPointElementProps {
+    name?: string;
+    LayoutOrder?: number;
+    children?: React.ReactNode;
+}
+export declare const BreakpointProvider: React.ForwardRefExoticComponent<BreakpointProviderProps & React.RefAttributes<Frame>>;

package/out/Components/Layout/BreakpointProvider.luau

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local BreakpointContext = _Contexts.BreakpointContext
+local CleanThemeContext = _Contexts.CleanThemeContext
+local BreakpointHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").BreakpointHelper
+local BreakpointProvider = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local frameRef = React.useRef()
+	local widthRef = React.useRef(0)
+	local value, setValue = React.useState(function()
+		return {
+			width = 0,
+			breakpoint = BreakpointHelper:getBreakpoint(0, breakpoints),
+		}
+	end)
+	local valueRef = React.useRef(value)
+	local resolve = function(width)
+		widthRef.current = width
+		local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+		if breakpoint == valueRef.current.breakpoint then
+			return nil
+		end
+		local resolved = {
+			width = width,
+			breakpoint = breakpoint,
+		}
+		valueRef.current = resolved
+		setValue(resolved)
+	end
+	React.useEffect(function()
+		local instance = frameRef.current
+		resolve(if instance ~= nil then instance.AbsoluteSize.X else widthRef.current)
+	end, { breakpoints })
+	local setFrame = React.useCallback(function(instance)
+		frameRef.current = instance
+		local _ref = ref
+		if type(_ref) == "function" then
+			ref(instance)
+		elseif ref ~= nil then
+			ref.current = instance
+		end
+	end, { ref })
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "BreakpointProvider"
+	end
+	_attributes.key = _condition
+	_attributes.ref = setFrame
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Size = UDim2.fromScale(1, 1)
+	_attributes.BackgroundTransparency = 1
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			return resolve(instance.AbsoluteSize.X)
+		end,
+	}
+	return React.createElement("frame", _attributes, React.createElement(BreakpointContext.Provider, {
+		value = value,
+	}, props.children))
+end)
+return {
+	BreakpointProvider = BreakpointProvider,
+}

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

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

package/out/Components/Layout/init.luau

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

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

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { IconElementProps, IntentElementProps, ScalableElementProps } from "../../Interfaces/";
+export interface BadgeProps extends IntentElementProps, ScalableElementProps, IconElementProps {
+    text: string;
+    name?: string;
+    LayoutOrder?: number;
+    Position?: UDim2;
+    AnchorPoint?: Vector2;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<ImageLabel>>;

package/out/Components/Surface/Badge.luau

@@ -0,0 +1,89 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
+local Padding = _Decorator.Padding
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+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 HStack = TS.import(script, script.Parent.Parent, "Layout").HStack
+local Icon = TS.import(script, script.Parent, "Icon").Icon
+local Badge = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local badgeTheme = theme.components.badge
+	local scale = props.scale or theme.default.scale
+	local intentColors = ColorHelper:getIntentColors(theme, props.intent, "default", badgeTheme.intents)
+	local backgroundImage = CssHelper:resolveBackgroundImage(intentColors.backgroundImage)
+	local padding = SpacingHelper:GetResolvedPadding(theme, {}, badgeTheme.spacing, badgeTheme.padding, scale)
+	local gap = math.ceil(SpacingHelper:GetPadding(theme, scale, badgeTheme.spacing) / 2)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Badge"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Active = false
+	_attributes.Selectable = false
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Position = props.Position
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.BackgroundColor3 = intentColors.backgroundColor
+	local _condition_1 = intentColors.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BorderSizePixel = 0
+	local _condition_2 = backgroundImage.Image
+	if _condition_2 == nil then
+		_condition_2 = ""
+	end
+	_attributes.Image = _condition_2
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
+	return React.createElement("imagelabel", _attributes, React.createElement(Corners, {
+		radius = badgeTheme.cornerRadius,
+	}), badgeTheme.borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
+		Thickness = badgeTheme.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = intentColors.borderColor,
+	})), React.createElement(Gradient, {
+		value = intentColors.backgroundGradient,
+	}), React.createElement(Padding, {
+		resolvedPadding = padding,
+	}), React.createElement(HStack, {
+		valign = "Center",
+		Wraps = false,
+		Padding = UDim.new(0, gap),
+	}, props.icon ~= nil and React.createElement(Icon, {
+		name = "BadgeIcon",
+		LayoutOrder = 1,
+		scale = scale,
+		icon = props.icon,
+		color = intentColors.textColor,
+	}), React.createElement(Text, {
+		name = "BadgeText",
+		LayoutOrder = 2,
+		text = props.text,
+		TextWrap = false,
+		typography = TypographyHelper:getTypography(theme, scale, badgeTheme.typography),
+		TextColor3 = intentColors.textColor,
+	})))
+end)
+return {
+	Badge = Badge,
+}

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

@@ -1,3 +1,4 @@
+export * from './Badge';
 export * from './Box';
 export * from './Card';
 export * from './Icon';

package/out/Components/Surface/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "Badge") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Box") or {} do
 	exports[_k] = _v
 end

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

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+import { Breakpoint, ResponsiveValue } from "../Interfaces/responsive.types";
+export interface BreakpointContextValue {
+    width: number;
+    breakpoint: Breakpoint;
+}
+export declare const BreakpointContext: React.Context<BreakpointContextValue | undefined>;
+export declare function useBreakpoint(): Breakpoint;
+export declare function useBreakpointValue<T>(value: ResponsiveValue<T> | undefined): T | undefined;

package/out/Contexts/breakpoint.context.luau

@@ -0,0 +1,65 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Workspace = TS.import(script, TS.getModule(script, "@rbxts", "services")).Workspace
+local BreakpointHelper = TS.import(script, script.Parent.Parent, "Helpers", "breakpoint.helper").BreakpointHelper
+local SizeHelper = TS.import(script, script.Parent.Parent, "Helpers", "size.helper").SizeHelper
+local CleanThemeContext = TS.import(script, script.Parent, "theme.context").CleanThemeContext
+local BreakpointContext = React.createContext(nil)
+local function getViewportBreakpoint(breakpoints)
+	local camera = Workspace.CurrentCamera
+	if camera == nil then
+		return nil
+	end
+	return BreakpointHelper:getBreakpoint(camera.ViewportSize.X, breakpoints)
+end
+local function useBreakpoint()
+	local context = React.useContext(BreakpointContext)
+	local theme = React.useContext(CleanThemeContext)
+	local viewportBreakpoint, setViewportBreakpoint = React.useState(function()
+		return (if context == nil then getViewportBreakpoint(theme.breakpoints) else nil) or "xs"
+	end)
+	React.useEffect(function()
+		if context ~= nil then
+			return nil
+		end
+		local viewportConnection
+		local update = function()
+			local resolved = getViewportBreakpoint(theme.breakpoints)
+			if resolved ~= nil then
+				setViewportBreakpoint(resolved)
+			end
+		end
+		local bindCamera = function()
+			local _result = viewportConnection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+			viewportConnection = nil
+			local camera = Workspace.CurrentCamera
+			if camera ~= nil then
+				viewportConnection = camera:GetPropertyChangedSignal("ViewportSize"):Connect(update)
+			end
+			update()
+		end
+		local cameraConnection = Workspace:GetPropertyChangedSignal("CurrentCamera"):Connect(bindCamera)
+		bindCamera()
+		return function()
+			cameraConnection:Disconnect()
+			local _result = viewportConnection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, { context == nil, theme.breakpoints })
+	return if context ~= nil then context.breakpoint else viewportBreakpoint
+end
+local function useBreakpointValue(value)
+	local breakpoint = useBreakpoint()
+	return SizeHelper:resolveResponsiveValue(value, breakpoint)
+end
+return {
+	useBreakpoint = useBreakpoint,
+	useBreakpointValue = useBreakpointValue,
+	BreakpointContext = BreakpointContext,
+}

package/out/Contexts/index.d.ts

@@ -1,3 +1,4 @@
+export * from './breakpoint.context';
 export * from './draggable.context';
 export * from './droppable.context';
 export * from './modal.context';

package/out/Contexts/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "breakpoint.context") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "draggable.context") or {} do
 	exports[_k] = _v
 end

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

@@ -55,6 +55,14 @@ export interface ThemeTemplate {
             backgroundGradient?: CssBackgroundGradient;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
+        badge: {
+            cornerRadius: CssSize;
+            borderThickness: number;
+            spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
+            typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+        };
         button: {
             backgroundTransparency: number;
             cornerRadius: CssSize;

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

@@ -150,6 +150,48 @@ local DarkTheme = createTheme({
 			cornerRadius = 8,
 			boxShadow = "2px 2px 8px 0px",
 		},
+		badge = {
+			cornerRadius = "50%",
+			borderThickness = 1,
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#E8EDF8"),
+						backgroundColor = Color3.fromHex("#252B36"),
+						borderColor = Color3.fromHex("#343B49"),
+						backgroundTransparency = 0,
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#75E0A7"),
+						backgroundColor = Color3.fromHex("#1B3A2A"),
+						borderColor = Color3.fromHex("#258A56"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#8DD0FF"),
+						backgroundColor = Color3.fromHex("#1B3345"),
+						borderColor = Color3.fromHex("#2F79B4"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFD978"),
+						backgroundColor = Color3.fromHex("#3A2F17"),
+						borderColor = Color3.fromHex("#B68522"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FF8D8D"),
+						backgroundColor = Color3.fromHex("#3F1F1F"),
+						borderColor = Color3.fromHex("#B93A3A"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,

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

@@ -148,6 +148,77 @@ local DefaultTheme = {
 			cornerRadius = 8,
 			boxShadow = "2px 2px 2px 2px",
 		},
+		badge = {
+			cornerRadius = "50%",
+			borderThickness = 1,
+			padding = {
+				xs = "1px 4px",
+				sm = "2px 6px",
+				md = "2px 8px",
+				lg = "4px 10px",
+				xl = "6px 14px",
+			},
+			typography = {
+				xs = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size10,
+				},
+				sm = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size12,
+				},
+				md = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size14,
+				},
+				lg = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size18,
+				},
+				xl = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size24,
+				},
+			},
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#EEF1F6"),
+						borderColor = Color3.fromHex("#D9DEE8"),
+						backgroundTransparency = 0,
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#2E9D63"),
+						borderColor = Color3.fromHex("#237D4D"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#3187C8"),
+						borderColor = Color3.fromHex("#266CA2"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#E7A92F"),
+						borderColor = Color3.fromHex("#C58B1D"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#D64545"),
+						borderColor = Color3.fromHex("#B53535"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,

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

@@ -150,6 +150,48 @@ local SandstoneTheme = createTheme({
 			cornerRadius = 4,
 			boxShadow = "0px 3px 8px 0px",
 		},
+		badge = {
+			cornerRadius = 4,
+			borderThickness = 1,
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#244F4A"),
+						backgroundColor = Color3.fromHex("#D9E9E5"),
+						borderColor = Color3.fromHex("#4E8179"),
+						backgroundTransparency = 0,
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#2E6245"),
+						backgroundColor = Color3.fromHex("#DDEBDD"),
+						borderColor = Color3.fromHex("#5B8A6A"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#365F78"),
+						backgroundColor = Color3.fromHex("#DDEAF0"),
+						borderColor = Color3.fromHex("#6F98AE"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#7A5721"),
+						backgroundColor = Color3.fromHex("#F5E8C8"),
+						borderColor = Color3.fromHex("#C3994C"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#8A3D3A"),
+						backgroundColor = Color3.fromHex("#F2D9D5"),
+						borderColor = Color3.fromHex("#B46861"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,

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

@@ -42,6 +42,76 @@ local WoodenTheme = createTheme({
 		},
 	},
 	components = {
+		badge = {
+			cornerRadius = "4px",
+			borderThickness = 2,
+			padding = "2px 10px",
+			typography = {
+				xs = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				sm = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				md = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				lg = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				xl = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+			},
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#7A4A20"),
+						backgroundTransparency = 0,
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#4E6A24"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#2C5270"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#A67A20"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#7A3220"),
+					},
+				},
+			},
+		},
 		button = {
 			cornerRadius = 0,
 			backgroundTransparency = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {