@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Input/Switch.luau

@@ -0,0 +1,145 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local BoxShadow = _Decorator.BoxShadow
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local SizeHelper = _Helpers.SizeHelper
+local function lerpUDim(from, to, alpha)
+	return UDim.new(from.Scale + (to.Scale - from.Scale) * alpha, from.Offset + (to.Offset - from.Offset) * alpha)
+end
+local function Switch(props)
+	local theme = React.useContext(CleanThemeContext)
+	local fieldset = React.useContext(FieldsetContext)
+	local switchTheme = theme.components.switch
+	local _condition = props.checked
+	if _condition == nil then
+		_condition = false
+	end
+	local checked, setChecked = React.useState(_condition)
+	React.useEffect(function()
+		if not fieldset then
+			return nil
+		end
+		local _connection = fieldset.labelActivated
+		if _connection ~= nil then
+			_connection = _connection.Event:Connect(function()
+				if props.disabled then
+					return nil
+				end
+				setChecked(function(current)
+					return not current
+				end)
+			end)
+		end
+		local connection = _connection
+		return function()
+			local _result = connection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, { fieldset, props.disabled })
+	React.useEffect(function()
+		local _result = props.onChange
+		if _result ~= nil then
+			_result(checked)
+		end
+	end, { checked })
+	local duration = switchTheme.animation.duration
+	local progress, progressTween = useTween(if checked then 1 else 0, {
+		duration = duration,
+	})
+	React.useEffect(function()
+		local goal = if checked then 1 else 0
+		progressTween:setGoal(goal, {
+			duration = duration,
+		})
+		if duration == 0 then
+			progressTween:setPosition(goal)
+		end
+		progressTween:start()
+	end, { checked, duration, progressTween })
+	local onColors = ColorHelper:getIntentColors(theme, props.intent, if props.disabled then "disabled" else "default", switchTheme.track.intents)
+	local offBackgroundColor = switchTheme.track.backgroundColor
+	local offBorderColor = switchTheme.track.borderColor
+	local trackBackgroundColor = progress:map(function(value)
+		return offBackgroundColor:Lerp(onColors.backgroundColor, value)
+	end)
+	local trackBorderColor = progress:map(function(value)
+		return offBorderColor:Lerp(onColors.borderColor, value)
+	end)
+	local trackWidth = SizeHelper:toUDim(switchTheme.width)
+	local trackHeight = SizeHelper:toUDim(switchTheme.height)
+	local inset = SizeHelper:toUDim(switchTheme.thumb.inset)
+	local insetDoubled = inset + inset
+	local thumbDiameter = trackHeight - insetDoubled
+	local thumbOffX = inset
+	local thumbOnX = trackWidth - inset - thumbDiameter
+	local thumbPosition = progress:map(function(value)
+		return UDim2.new(lerpUDim(thumbOffX, thumbOnX, value), UDim.new(0.5, 0))
+	end)
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Switch"
+	end
+	_attributes.key = _condition_1
+	_attributes.Active = not props.disabled
+	_attributes.Selectable = not props.disabled
+	_attributes.AutoButtonColor = false
+	_attributes.Size = UDim2.new(trackWidth, trackHeight)
+	_attributes.ZIndex = props.ZIndex
+	_attributes.BackgroundColor3 = trackBackgroundColor
+	local _result
+	if props.disabled then
+		_result = switchTheme.disabledTransparency
+	else
+		local _condition_2 = props.BackgroundTransparency
+		if _condition_2 == nil then
+			_condition_2 = switchTheme.track.backgroundTransparency
+		end
+		_result = _condition_2
+	end
+	_attributes.BackgroundTransparency = _result
+	_attributes.Event = {
+		Activated = function()
+			if props.disabled then
+				return nil
+			end
+			setChecked(not checked)
+		end,
+	}
+	return React.createElement("imagebutton", _attributes, React.createElement(Corners, {
+		radius = switchTheme.cornerRadius,
+	}), React.createElement("uistroke", {
+		key = "TrackStroke",
+		Thickness = switchTheme.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = trackBorderColor,
+	}), React.createElement("frame", {
+		key = "Thumb",
+		Position = thumbPosition,
+		AnchorPoint = Vector2.new(0, 0.5),
+		Size = UDim2.new(thumbDiameter, thumbDiameter),
+		BackgroundColor3 = switchTheme.thumb.backgroundColor,
+		BackgroundTransparency = if props.disabled then switchTheme.disabledTransparency else switchTheme.thumb.backgroundTransparency,
+		BorderSizePixel = 0,
+	}, React.createElement("uistroke", {
+		key = "ThumbStroke",
+		Thickness = switchTheme.thumb.borderThickness,
+		Color = switchTheme.thumb.borderColor,
+	}), React.createElement(Corners, {
+		radius = switchTheme.thumb.cornerRadius,
+	}), React.createElement(BoxShadow, {
+		["box-shadow"] = switchTheme.thumb.boxShadow,
+	})))
+end
+return {
+	Switch = Switch,
+}

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

@@ -5,3 +5,4 @@ export * from './Increment';
 export * from './Input';
 export * from './Select';
 export * from './Slider';
+export * from './Switch';

package/out/Components/Input/init.luau

@@ -22,4 +22,7 @@ end
 for _k, _v in TS.import(script, script, "Slider") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Switch") or {} do
+	exports[_k] = _v
+end
 return exports

package/out/Components/Interaction/Modal.d.ts

@@ -0,0 +1,14 @@
+import React from "@rbxts/react";
+import { IntentElementProps } from "../../Interfaces";
+import { BoxProps } from "../Surface";
+export interface ModalProps extends BoxProps, IntentElementProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    draggable?: boolean;
+    initialFocus?: React.RefObject<GuiObject>;
+    children?: React.ReactNode;
+}
+export declare function Modal(props: ModalProps): React.JSX.Element | undefined;

package/out/Components/Interaction/Modal.luau

@@ -0,0 +1,262 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local GuiService = TS.import(script, TS.getModule(script, "@rbxts", "services")).GuiService
+local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
+local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local CleanThemeContext = _Contexts.CleanThemeContext
+local OverlayConsumer = _Contexts.OverlayConsumer
+local _modal_context = TS.import(script, script.Parent.Parent.Parent, "Contexts", "modal.context")
+local ModalCloseContext = _modal_context.ModalCloseContext
+local useModalStack = _modal_context.useModalStack
+local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
+local Draggable = TS.import(script, script.Parent.Parent, "Layout").Draggable
+local Card = TS.import(script, script.Parent.Parent, "Surface").Card
+local nextModalId = 0
+local function generateModalId()
+	nextModalId += 1
+	return `modal-{nextModalId}`
+end
+local function trySetSelectedObject(target)
+	pcall(function()
+		GuiService.SelectedObject = target
+	end)
+end
+local function getPanelContentSize(automaticSize)
+	local autoWidth = automaticSize == Enum.AutomaticSize.X or automaticSize == Enum.AutomaticSize.XY or automaticSize == "X" or automaticSize == "XY"
+	local autoHeight = automaticSize == Enum.AutomaticSize.Y or automaticSize == Enum.AutomaticSize.XY or automaticSize == "Y" or automaticSize == "XY"
+	return UDim2.fromScale(if autoWidth then 0 else 1, if autoHeight then 0 else 1)
+end
+local function Modal(props)
+	local theme = React.useContext(CleanThemeContext)
+	local stack = useModalStack()
+	local idRef = React.useRef()
+	if idRef.current == nil then
+		idRef.current = generateModalId()
+	end
+	local id = idRef.current
+	local _condition = props.closeOnBackdropClick
+	if _condition == nil then
+		_condition = true
+	end
+	local closeOnBackdropClick = _condition
+	local _condition_1 = props.closeOnEscape
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	local closeOnEscape = _condition_1
+	local isControlled = props.open ~= nil
+	local _condition_2 = props.defaultOpen
+	if _condition_2 == nil then
+		_condition_2 = false
+	end
+	local uncontrolledOpen, setUncontrolledOpen = React.useState(_condition_2)
+	local _condition_3 = props.open
+	if _condition_3 == nil then
+		_condition_3 = uncontrolledOpen
+	end
+	local open = _condition_3
+	local shouldRender, setShouldRender = React.useState(open)
+	local dismissingRef = React.useRef(false)
+	local fadeThreadRef = React.useRef()
+	local panelRef = React.useRef()
+	local previousSelectionRef = React.useRef()
+	local onOpenChangeRef = React.useRef(props.onOpenChange)
+	React.useEffect(function()
+		onOpenChangeRef.current = props.onOpenChange
+	end, { props.onOpenChange })
+	local requestClose = React.useCallback(function()
+		if not isControlled then
+			setUncontrolledOpen(false)
+		end
+		local _result = onOpenChangeRef.current
+		if _result ~= nil then
+			_result(false)
+		end
+	end, { isControlled })
+	local requestCloseRef = React.useRef(requestClose)
+	React.useEffect(function()
+		requestCloseRef.current = requestClose
+	end, { requestClose })
+	local closeOnEscapeRef = React.useRef(closeOnEscape)
+	React.useEffect(function()
+		closeOnEscapeRef.current = closeOnEscape
+	end, { closeOnEscape })
+	local fadeDuration = theme.components.modal.fadeDuration
+	local backdropGoalTransparency = theme.components.modal.backdrop.backgroundTransparency
+	local backdropTransparency, backdropTween = useTween(1, {
+		duration = fadeDuration,
+		easing = "quadOut",
+	})
+	local panelTransparency, panelTween = useTween(1, {
+		duration = fadeDuration,
+		easing = "quadOut",
+	})
+	local beginExit = React.useCallback(function()
+		if dismissingRef.current then
+			return nil
+		end
+		dismissingRef.current = true
+		if fadeDuration <= 0 then
+			setShouldRender(false)
+			return nil
+		end
+		fadeThreadRef.current = task.delay(fadeDuration, function()
+			fadeThreadRef.current = nil
+			setShouldRender(false)
+		end)
+	end, { fadeDuration })
+	React.useEffect(function()
+		if open then
+			local fadeThread = fadeThreadRef.current
+			if fadeThread ~= nil then
+				task.cancel(fadeThread)
+				fadeThreadRef.current = nil
+			end
+			dismissingRef.current = false
+			setShouldRender(true)
+		elseif shouldRender then
+			beginExit()
+		end
+	end, { open })
+	React.useEffect(function()
+		if not shouldRender then
+			return nil
+		end
+		backdropTween:setGoal(if open then backdropGoalTransparency else 1)
+		panelTween:setGoal(if open then 0 else 1)
+	end, { open, shouldRender, backdropGoalTransparency })
+	React.useEffect(function()
+		return function()
+			local fadeThread = fadeThreadRef.current
+			if fadeThread ~= nil then
+				task.cancel(fadeThread)
+			end
+		end
+	end, {})
+	React.useEffect(function()
+		if not shouldRender then
+			return nil
+		end
+		stack.register({
+			id = id,
+			closeOnEscape = function()
+				return closeOnEscapeRef.current
+			end,
+			requestClose = function()
+				return requestCloseRef.current()
+			end,
+		})
+		return function()
+			stack.unregister(id)
+		end
+	end, { shouldRender })
+	React.useEffect(function()
+		if not shouldRender then
+			return nil
+		end
+		previousSelectionRef.current = GuiService.SelectedObject
+		local _result = props.initialFocus
+		if _result ~= nil then
+			_result = _result.current
+		end
+		local _condition_4 = _result
+		if _condition_4 == nil then
+			_condition_4 = panelRef.current
+		end
+		trySetSelectedObject(_condition_4)
+		return function()
+			trySetSelectedObject(previousSelectionRef.current)
+		end
+	end, { shouldRender })
+	if not shouldRender then
+		return nil
+	end
+	local layerIndex = stack.getLayerIndex(id)
+	local backdropZIndex = theme.components.modal.baseZIndex + layerIndex * theme.components.modal.zIndexStep
+	return React.createElement(OverlayConsumer, {
+		render = function(overlay)
+			if overlay == nil then
+				return nil
+			end
+			local panelChildren = if props.draggable then React.Children.map(props.children, function(child)
+				return if React.isValidElement(child) and child.type == Card.Header then React.createElement(Draggable.Handle, nil, child) else child
+			end) else props.children
+			local _object = table.clone(props)
+			setmetatable(_object, nil)
+			local _left = "width"
+			local _condition_4 = props.width
+			if _condition_4 == nil then
+				_condition_4 = theme.components.modal.width
+			end
+			_object[_left] = _condition_4
+			local panelSizingProps = _object
+			local panelSize = SizeHelper:GetSize(panelSizingProps)
+			local panelAutomaticSize = SizeHelper:GetAutoSize(panelSizingProps)
+			local panelContentSize = if type(panelAutomaticSize) == "table" and panelAutomaticSize.map ~= nil then panelAutomaticSize:map(getPanelContentSize) else getPanelContentSize(panelAutomaticSize)
+			local _attributes = table.clone(props)
+			setmetatable(_attributes, nil)
+			local _condition_5 = props.name
+			if _condition_5 == nil then
+				_condition_5 = "Modal"
+			end
+			_attributes.name = _condition_5
+			_attributes.ref = panelRef
+			_attributes.Selectable = true
+			_attributes.Size = panelContentSize
+			_attributes.AutomaticSize = panelAutomaticSize
+			_attributes.width = nil
+			_attributes.height = nil
+			local panel = (React.createElement("imagebutton", {
+				key = "ModalPanelInputShield",
+				Active = true,
+				AnchorPoint = if props.draggable then Vector2.new(0.5, 0.5) else nil,
+				AutoButtonColor = false,
+				AutomaticSize = panelAutomaticSize,
+				BackgroundTransparency = 1,
+				ImageTransparency = 1,
+				Position = if props.draggable then UDim2.fromScale(0.5, 0.5) else nil,
+				Size = panelSize,
+				Event = {
+					Activated = function() end,
+				},
+			}, React.createElement(Card, _attributes, panelChildren)))
+			return ReactRoblox.createPortal(React.createElement("imagebutton", {
+				key = "ModalBackdrop",
+				Size = UDim2.fromScale(1, 1),
+				AutoButtonColor = false,
+				Active = true,
+				BackgroundColor3 = theme.components.modal.backdrop.backgroundColor,
+				BackgroundTransparency = backdropTransparency,
+				ZIndex = backdropZIndex,
+				Event = {
+					Activated = function()
+						if closeOnBackdropClick then
+							requestClose()
+						end
+					end,
+				},
+			}, React.createElement("canvasgroup", {
+				key = "ModalPanel",
+				Size = UDim2.fromScale(1, 1),
+				BackgroundTransparency = 1,
+				GroupTransparency = panelTransparency,
+				ZIndex = 2,
+			}, not props.draggable and (React.createElement("uilistlayout", {
+				key = "CenterLayout",
+				FillDirection = Enum.FillDirection.Horizontal,
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+			})), React.createElement(ModalCloseContext.Provider, {
+				value = requestClose,
+			}, if props.draggable then (React.createElement(Draggable, {
+				placeholder = false,
+				retainPosition = true,
+			}, panel)) else panel))), overlay)
+		end,
+	})
+end
+return {
+	Modal = Modal,
+}

package/out/Components/Interaction/Toast.d.ts

@@ -4,8 +4,9 @@ import { ToastOptions } from "../../Contexts";
 interface ToastProps extends ToastOptions {
     onDismiss: () => void;
 }
-export declare function Toast({ title, description, icon, intent, duration, dismissible, children, onDismiss, }: ToastProps): React.JSX.Element;
+export declare function Toast({ title, description, icon, intent, duration, dismissible, children, name, onDismiss, }: ToastProps): React.JSX.Element;
 interface ToastContainerProps extends SizeElementProps {
+    name?: string;
 }
 export declare function ToastContainer(props: ToastContainerProps): React.JSX.Element | undefined;
 export {};

package/out/Components/Interaction/Toast.luau

@@ -49,6 +49,10 @@ local function Toast(_param)
 	if children == nil then
 		children = nil
 	end
+	local name = _param.name
+	if name == nil then
+		name = nil
+	end
 	local onDismiss = _param.onDismiss
 	local theme = React.useContext(CleanThemeContext)
 	local dismissRef = React.useRef(onDismiss)
@@ -109,53 +113,69 @@ local function Toast(_param)
 		end
 	end, {})
 	local boxStyles = ColorHelper:getIntentColors(theme, intent, "default", theme.components.toast.intents)
-	local _condition = children ~= nil and children
-	if not _condition then
+	local _attributes = {}
+	local _condition = name
+	if _condition == nil then
+		_condition = "Toast"
+	end
+	_attributes.key = _condition
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.BackgroundTransparency = 1
+	_attributes.GroupTransparency = groupTransparency
+	local _condition_1 = children ~= nil and children
+	if not _condition_1 then
 		local _exp = icon ~= nil and React.createElement(Icon, {
+			name = "ToastIcon",
 			icon = icon,
 			scale = "sm",
 			color = boxStyles.textColor,
 		})
-		local _attributes = {
+		local _attributes_1 = {
+			name = "ToastTitle",
 			TextColor3 = boxStyles.textColor,
 		}
-		local _condition_1 = title
-		if _condition_1 == nil then
-			_condition_1 = ""
+		local _condition_2 = title
+		if _condition_2 == nil then
+			_condition_2 = ""
 		end
-		_attributes.text = _condition_1
-		_attributes.typography = TypographyHelper:getTypography(theme, nil, theme.components.toast.header.typography)
-		_condition = React.createElement(VStack, {
+		_attributes_1.text = _condition_2
+		_attributes_1.typography = TypographyHelper:getTypography(theme, nil, theme.components.toast.header.typography)
+		_condition_1 = React.createElement(VStack, {
 			spacing = "None",
-		}, React.createElement(Container, nil, React.createElement(HStack, {
+		}, React.createElement(Container, {
+			name = "ToastHeader",
+		}, React.createElement(HStack, {
 			valign = "Center",
-		}, _exp, React.createElement(Text, _attributes), dismissible and (React.createElement(FlexItem, {
+		}, _exp, React.createElement(Text, _attributes_1), dismissible and (React.createElement(FlexItem, {
 			align = "Right",
 		}, React.createElement(Button, {
+			name = "ToastDismissButton",
 			intent = intent,
 			spacing = "xs",
 			Event = {
 				Activated = beginDismiss,
 			},
 		}, React.createElement(Button.Icon, {
+			name = "ToastDismissIcon",
 			intent = intent,
 			icon = "times",
 			scale = "sm",
-		})))))), description ~= nil and (React.createElement(Container, nil, React.createElement(Text, {
+		})))))), description ~= nil and (React.createElement(Container, {
+			name = "ToastDescriptionContainer",
+		}, React.createElement(Text, {
+			name = "ToastDescription",
 			text = description,
 			TextColor3 = boxStyles.textColor,
 		}))))
 	end
-	return React.createElement("canvasgroup", {
-		Size = UDim2.fromScale(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		BackgroundTransparency = 1,
-		GroupTransparency = groupTransparency,
-	}, React.createElement(Box, {
+	return React.createElement("canvasgroup", _attributes, React.createElement(Box, {
+		name = "ToastBox",
 		["border-color"] = boxStyles.borderColor,
 		BackgroundColor3 = boxStyles.backgroundColor,
 		BackgroundTransparency = boxStyles.backgroundTransparency,
-	}, _condition), statusBarTheme ~= nil and React.createElement(React.Fragment, nil, React.createElement("frame", {
+	}, _condition_1), statusBarTheme ~= nil and React.createElement(React.Fragment, nil, React.createElement("frame", {
+		key = "StatusBar",
 		Size = progress:map(function(value)
 			return UDim2.new(UDim.new(value, 0), SizeHelper:toUDim(statusBarTheme.height))
 		end),
@@ -179,29 +199,34 @@ local function ToastContainer(props)
 	end
 	local position = if theme.components.toast.position then SizeHelper:GetPosition(theme.components.toast.position) else UDim2.fromOffset(5, 5)
 	local anchor = if theme.components.toast.position then SizeHelper:GetAnchor(theme.components.toast.position) else Vector2.new(0, 0)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "ToastContainer"
+	end
+	_attributes.name = _condition
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.new(SizeHelper:toUDim(theme.components.toast.width), UDim.new(0, 0)))
+	_attributes.Position = position
+	_attributes.AnchorPoint = anchor
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#toasts)
 	local _callback = function(toast)
-		local _attributes = {
+		local _attributes_1 = {
 			key = toast.id,
 		}
 		for _k, _v in toast do
-			_attributes[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes.onDismiss = function()
+		_attributes_1.onDismiss = function()
 			return dismiss(toast.id)
 		end
-		return React.createElement(Toast, _attributes)
+		return React.createElement(Toast, _attributes_1)
 	end
 	for _k, _v in toasts do
 		_newValue[_k] = _callback(_v, _k - 1, toasts)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(Container, {
-		Size = SizeHelper:GetSize(props, UDim2.new(SizeHelper:toUDim(theme.components.toast.width), UDim.new(0, 0))),
-		Position = position,
-		AnchorPoint = anchor,
-	}, React.createElement(VStack, {
+	return React.createElement(Container, _attributes, React.createElement(VStack, {
 		spacing = "xs",
 	}, _newValue))
 end