@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

package/out/ui/packages/listItem/components/ListItem.styles.d.ts

@@ -0,0 +1,5 @@
+declare const useListItemStyles: (props: {
+    selected?: boolean;
+    disabled?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useListItemStyles;

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -0,0 +1,64 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local createStyles = _theme.createStyles
+local componentStyles = _theme.componentStyles
+local useListItemStyles = componentStyles("ListItem", function(theme, _param)
+	local selected = _param.selected
+	if selected == nil then
+		selected = false
+	end
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.action.selected,
+			BackgroundTransparency = if selected then 0 else 1,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Active = not disabled,
+			Selectable = not disabled,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.padding.calc(1)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		primary = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		secondary = {
+			LayoutOrder = 2,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+	})
+end)
+local default = useListItemStyles
+return {
+	default = default,
+}

package/out/ui/packages/listItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListItem } from "./components/ListItem";
+export { ListItemProps } from "./components/ListItem";

package/out/ui/packages/listItem/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ListItem = TS.import(script, script, "components", "ListItem").default
+return exports

package/out/ui/packages/loadingStroke/components/LoadingStroke.luau

@@ -12,6 +12,7 @@ local function LoadingStroke(props)
 		animating = false
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local children = _binding.children
 	local id = _binding.id
 	local ref = _binding.ref
@@ -31,31 +32,35 @@ local function LoadingStroke(props)
 			end
 		end
 	end, { animating })
-	local _condition = animating
-	if _condition then
-		local _attributes = {}
-		local _condition_1 = id
-		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
-			_condition_1 = "LoadingStroke"
+	-- Decorative shimmer; not a semantic text/surface token.
+	local stroke = Color3.fromRGB(255, 255, 255)
+	local mid = Color3.fromRGB(235, 235, 235)
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "LoadingStroke"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Color = stroke
+	_attributes.Thickness = 2
+	_attributes.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
 		end
-		_attributes.key = _condition_1
-		_attributes.ref = ref
-		_attributes.Color = Color3.fromRGB(255, 255, 255)
-		_attributes.Thickness = 2
-		_attributes.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
-		if className then
-			for _k, _v in className do
-				_attributes[_k] = _v
-			end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
 		end
-		_condition = (React.createElement("uistroke", _attributes, React.createElement("uigradient", {
-			ref = gradientRef,
-			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 1) }),
-			Rotation = 0,
-			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)), ColorSequenceKeypoint.new(0.5, Color3.fromRGB(235, 235, 235)), ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255)) }),
-		}), children))
 	end
-	return React.createElement(React.Fragment, nil, _condition)
+	return React.createElement("uistroke", _attributes, React.createElement("uigradient", {
+		ref = gradientRef,
+		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 1) }),
+		Rotation = 0,
+		Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, stroke), ColorSequenceKeypoint.new(0.5, mid), ColorSequenceKeypoint.new(1, stroke) }),
+	}), children)
 end
 local default = LoadingStroke
 return {

package/out/ui/packages/menu/components/Menu.d.ts

@@ -0,0 +1,14 @@
+export interface MenuItem {
+    id: string;
+    text: string;
+    disabled?: boolean;
+}
+export interface MenuProps {
+    anchor?: GuiObject;
+    open: boolean;
+    items: MenuItem[];
+    onSelect: (id: string) => void;
+    onClose: () => void;
+}
+declare function Menu(props: MenuProps): JSX.Element | undefined;
+export default Menu;

package/out/ui/packages/menu/components/Menu.luau

@@ -0,0 +1,60 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
+local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
+local ROW = 28
+local function Menu(props)
+	local _binding = props
+	local anchor = _binding.anchor
+	local open = _binding.open
+	local items = _binding.items
+	local onSelect = _binding.onSelect
+	local onClose = _binding.onClose
+	local styles = useMenuStyles()
+	if not open then
+		return nil
+	end
+	local _attributes = {
+		key = "Surface",
+	}
+	for _k, _v in styles.surface do
+		_attributes[_k] = _v
+	end
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return React.createElement(ListItem, {
+			key = item.id,
+			text = item.text,
+			disabled = item.disabled,
+			onActivated = function()
+				if item.disabled == true then
+					return nil
+				end
+				onSelect(item.id)
+				onClose()
+			end,
+		})
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(Popup, {
+		anchor = anchor,
+		preferredHeight = #items * ROW,
+		onDismiss = onClose,
+	}, React.createElement("frame", _attributes, _exp, _exp_1, _newValue))
+end
+local default = Menu
+return {
+	default = default,
+}

package/out/ui/packages/menu/components/Menu.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useMenuStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useMenuStyles;

package/out/ui/packages/menu/components/Menu.styles.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local createStyles = _theme.createStyles
+local componentStyles = _theme.componentStyles
+local useMenuStyles = componentStyles("Menu", function(theme)
+	return createStyles({
+		surface = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+	})
+end)
+local default = useMenuStyles
+return {
+	default = default,
+}

package/out/ui/packages/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Menu } from "./components/Menu";
+export { MenuProps, MenuItem } from "./components/Menu";

package/out/ui/packages/menu/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Menu = TS.import(script, script, "components", "Menu").default
+return exports

package/out/ui/packages/modal/components/Modal.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+export interface ModalProps {
+    host?: Instance;
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+}
+declare function Modal(props: ModalProps): JSX.Element | undefined;
+export default Modal;

package/out/ui/packages/modal/components/Modal.luau

@@ -0,0 +1,97 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
+local GuiService = _services.GuiService
+local UserInputService = _services.UserInputService
+local Portal = TS.import(script, script.Parent.Parent.Parent, "popup").Portal
+local isDismissInput = TS.import(script, script.Parent, "dismissInput").isDismissInput
+local _focusTrap = TS.import(script, script.Parent, "focusTrap")
+local isFocusable = _focusTrap.isFocusable
+local pickFocus = _focusTrap.pickFocus
+local useModalStyles = TS.import(script, script.Parent, "Modal.styles").default
+local function Modal(props)
+	local _binding = props
+	local host = _binding.host
+	local open = _binding.open
+	local onClose = _binding.onClose
+	local children = _binding.children
+	local styles = useModalStyles()
+	local close = useRef(onClose)
+	local surface = useRef()
+	close.current = onClose
+	useEffect(function()
+		if not open then
+			return nil
+		end
+		local previous = GuiService.SelectedObject
+		local root = surface.current
+		local pull = function()
+			if not root then
+				return nil
+			end
+			local selected = GuiService.SelectedObject
+			local choice = pickFocus(root:GetDescendants(), selected, selected ~= nil and selected:IsDescendantOf(root), isFocusable)
+			if choice ~= nil and isFocusable(choice) and choice ~= selected then
+				GuiService.SelectedObject = choice
+			end
+		end
+		pull()
+		local selection = GuiService:GetPropertyChangedSignal("SelectedObject"):Connect(pull)
+		local connection = UserInputService.InputBegan:Connect(function(input)
+			if isDismissInput(input) then
+				close.current()
+			end
+		end)
+		return function()
+			selection:Disconnect()
+			connection:Disconnect()
+			if previous and previous.Parent then
+				GuiService.SelectedObject = previous
+			end
+		end
+	end, { open })
+	if not open then
+		return nil
+	end
+	local _attributes = {
+		key = "Modal",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	local _attributes_1 = {
+		key = "Backdrop",
+	}
+	for _k, _v in styles.backdrop do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.Event = {
+		Activated = function()
+			return close.current()
+		end,
+	}
+	local _exp = React.createElement("textbutton", _attributes_1)
+	local _attributes_2 = {
+		key = "Surface",
+		ref = surface,
+	}
+	for _k, _v in styles.surface do
+		_attributes_2[_k] = _v
+	end
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = table.clone(styles.corner)
+	setmetatable(_attributes_4, nil)
+	return React.createElement(Portal, {
+		host = host,
+	}, React.createElement("frame", _attributes, _exp, React.createElement("frame", _attributes_2, _exp_1, React.createElement("uicorner", _attributes_4), children)))
+end
+local default = Modal
+return {
+	default = default,
+}

package/out/ui/packages/modal/components/Modal.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useModalStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useModalStyles;

package/out/ui/packages/modal/components/Modal.styles.luau

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local createStyles = _theme.createStyles
+local componentStyles = _theme.componentStyles
+local useModalStyles = componentStyles("Modal", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 30000,
+		},
+		backdrop = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = 0.45,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Selectable = false,
+			ZIndex = 30000,
+		},
+		surface = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+			ZIndex = 30001,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.padding.calc(2)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useModalStyles
+return {
+	default = default,
+}

package/out/ui/packages/modal/components/dismissInput.d.ts

@@ -0,0 +1 @@
+export declare function isDismissInput(input: InputObject): boolean;

package/out/ui/packages/modal/components/dismissInput.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local function isDismissInput(input)
+	local key = input.KeyCode.Name
+	return key == "Escape" or key == "ButtonB"
+end
+return {
+	isDismissInput = isDismissInput,
+}

package/out/ui/packages/modal/components/focusTrap.d.ts

@@ -0,0 +1,2 @@
+export declare function pickFocus<T>(nodes: ReadonlyArray<T>, selected: T | undefined, contains: boolean, selectable: (node: T) => boolean): T | undefined;
+export declare function isFocusable(node: Instance): node is GuiObject;

package/out/ui/packages/modal/components/focusTrap.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+local function pickFocus(nodes, selected, contains, selectable)
+	if contains and selected ~= nil then
+		return selected
+	end
+	for _, node in nodes do
+		if selectable(node) then
+			return node
+		end
+	end
+	return nil
+end
+local function isFocusable(node)
+	if not node:IsA("GuiButton") and not node:IsA("TextBox") then
+		return false
+	end
+	return node.Selectable and node.Visible
+end
+return {
+	pickFocus = pickFocus,
+	isFocusable = isFocusable,
+}

package/out/ui/packages/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from "./components/Modal";
+export { ModalProps } from "./components/Modal";

package/out/ui/packages/modal/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Modal = TS.import(script, script, "components", "Modal").default
+return exports

package/out/ui/packages/motion/duration.d.ts

@@ -0,0 +1,2 @@
+export declare function motionDuration(duration: number, reducedMotion?: boolean): number;
+export declare function assignGoal(target: object, goal: object): void;

package/out/ui/packages/motion/duration.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local function motionDuration(duration, reducedMotion)
+	if reducedMotion == true or duration ~= duration or duration <= 0 then
+		return 0
+	end
+	return duration
+end
+local function assignGoal(target, goal)
+	local record = target
+	for key, value in pairs(goal) do
+		record[key] = value
+	end
+end
+return {
+	motionDuration = motionDuration,
+	assignGoal = assignGoal,
+}

package/out/ui/packages/motion/index.d.ts

@@ -0,0 +1,5 @@
+export { loopProperty } from "./loop";
+export { motionDuration, assignGoal } from "./duration";
+export { playProperty } from "./play";
+export { resolveReduced } from "./resolveReduced";
+export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys } from "./unit";

package/out/ui/packages/motion/init.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.loopProperty = TS.import(script, script, "loop").loopProperty
+local _duration = TS.import(script, script, "duration")
+exports.motionDuration = _duration.motionDuration
+exports.assignGoal = _duration.assignGoal
+exports.playProperty = TS.import(script, script, "play").playProperty
+exports.resolveReduced = TS.import(script, script, "resolveReduced").resolveReduced
+local _unit = TS.import(script, script, "unit")
+exports.clampUnit = _unit.clampUnit
+exports.stopOnce = _unit.stopOnce
+exports.progressUnit = _unit.progressUnit
+exports.progressSpin = _unit.progressSpin
+exports.arcKeys = _unit.arcKeys
+return exports

package/out/ui/packages/motion/loop.d.ts

@@ -0,0 +1 @@
+export declare function loopProperty(instance: Instance, goal: object, duration: number, reverses?: boolean): () => void;

package/out/ui/packages/motion/loop.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local TweenService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TweenService
+local stopOnce = TS.import(script, script.Parent, "unit").stopOnce
+local function loopProperty(instance, goal, duration, reverses)
+	if reverses == nil then
+		reverses = false
+	end
+	local tween = TweenService:Create(instance, TweenInfo.new(duration, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1, reverses), goal)
+	tween:Play()
+	return stopOnce(function()
+		tween:Cancel()
+		tween:Destroy()
+	end)
+end
+return {
+	loopProperty = loopProperty,
+}

package/out/ui/packages/motion/play.d.ts

@@ -0,0 +1 @@
+export declare function playProperty(instance: Instance, goal: object, duration: number, reducedMotion?: boolean): () => void;

package/out/ui/packages/motion/play.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local TweenService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TweenService
+local _duration = TS.import(script, script.Parent, "duration")
+local assignGoal = _duration.assignGoal
+local motionDuration = _duration.motionDuration
+local stopOnce = TS.import(script, script.Parent, "unit").stopOnce
+local function playProperty(instance, goal, duration, reducedMotion)
+	local seconds = motionDuration(duration, reducedMotion)
+	if seconds == 0 then
+		assignGoal(instance, goal)
+		return stopOnce(function() end)
+	end
+	local tween = TweenService:Create(instance, TweenInfo.new(seconds, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), goal)
+	tween:Play()
+	return stopOnce(function()
+		tween:Cancel()
+		tween:Destroy()
+	end)
+end
+return {
+	playProperty = playProperty,
+}

package/out/ui/packages/motion/resolveReduced.d.ts

@@ -0,0 +1 @@
+export declare function resolveReduced(override?: boolean, themeReduced?: boolean): boolean;

package/out/ui/packages/motion/resolveReduced.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function resolveReduced(override, themeReduced)
+	if override ~= nil then
+		return override
+	end
+	return themeReduced == true
+end
+return {
+	resolveReduced = resolveReduced,
+}

package/out/ui/packages/motion/unit.d.ts

@@ -0,0 +1,8 @@
+export declare function clampUnit(value: number): number;
+export declare function stopOnce(destroy: () => void): () => void;
+export declare function progressUnit(value?: number, progress?: number): number;
+export declare function progressSpin(indeterminate: boolean, reducedMotion?: boolean, disabled?: boolean): false | "spin";
+export declare function arcKeys(value: number): {
+    time: number;
+    transparency: number;
+}[];