@rbxts-ui/components 2.0.0 → 3.0.0

package/dist/layout/SegmentedToggle.d.ts

@@ -0,0 +1,17 @@
+import React from "@rbxts/react";
+export interface SegmentedToggleOption<T extends string> {
+    id: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedToggleProps<T extends string> {
+    options: ReadonlyArray<SegmentedToggleOption<T>>;
+    value: T;
+    onChange: (id: T) => void;
+    disabled?: boolean;
+    size?: "default" | "small";
+    label?: string;
+    children?: React.ReactNode;
+}
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, }: SegmentedToggleProps<T>): JSX.Element;
+//# sourceMappingURL=SegmentedToggle.d.ts.map

package/dist/layout/SegmentedToggle.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
+local HStack = _layout.HStack
+local VStack = _layout.VStack
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function SegmentedToggle(_param)
+	local options = _param.options
+	local value = _param.value
+	local onChange = _param.onChange
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local size = _param.size
+	if size == nil then
+		size = "default"
+	end
+	local label = _param.label
+	local children = _param.children
+	local theme = defaultTheme
+	local rem = useRem()
+	local count = #options
+	if count == 0 then
+		return React.createElement(React.Fragment)
+	end
+	local height = if size == "small" then rem(4) else rem(5)
+	local spacing = rem(1)
+	local innerPaddingX = rem(0.6)
+	local innerPaddingY = rem(0.5)
+	local buttonCorner = UDim.new(0, rem(2))
+	local buttonWidthOffset = if count > 1 then -((count - 1) * spacing) / count else 0
+	local buttonSize = UDim2.new(1 / count, buttonWidthOffset, 1, 0)
+	local handleChange = function(id, optionDisabled)
+		if disabled or optionDisabled then
+			return nil
+		end
+		if id == value then
+			return nil
+		end
+		onChange(id)
+	end
+	local showLabel = label ~= nil and label ~= ""
+	local containerHeight = if showLabel then height + rem(3.5) else height
+	local labelColor = if disabled then theme.palette.disabled else theme.palette.crust
+	local _exp = showLabel and (React.createElement(Text, {
+		text = label,
+		textSize = rem(3),
+		textScaled = true,
+		textColor = labelColor,
+		size = UDim2.new(1, 0, 0, rem(3)),
+		textXAlignment = "Left",
+	}))
+	local _exp_1 = React.createElement("uistroke", {
+		Color = theme.palette.overlay0,
+		Transparency = if disabled then 0.6 else 0.3,
+		Thickness = 1,
+	})
+	local _exp_2 = React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, innerPaddingX),
+		PaddingRight = UDim.new(0, innerPaddingX),
+		PaddingTop = UDim.new(0, innerPaddingY),
+		PaddingBottom = UDim.new(0, innerPaddingY),
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(option, index)
+		local isSelected = option.id == value
+		local optionDisabled = disabled or option.disabled
+		local backgroundColor = theme.palette.blue
+		return React.createElement(Button, {
+			key = `segmented-toggle-{option.id}-{index}`,
+			size = buttonSize,
+			backgroundColor = backgroundColor,
+			backgroundTransparency = if isSelected then 0 else 1,
+			onClick = function()
+				return handleChange(option.id, optionDisabled)
+			end,
+			selectable = false,
+			cornerRadius = buttonCorner,
+		}, React.createElement(Text, {
+			size = UDim2.new(1, 0, 1, 0),
+			text = option.label,
+			textSize = rem(3),
+			textScaled = true,
+			textColor = theme.palette.crust,
+			textXAlignment = "Center",
+			textYAlignment = "Center",
+			padding = 0.5,
+			rem = rem,
+		}))
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(VStack, {
+		spacing = rem(1),
+		size = UDim2.new(1, 0, 0, containerHeight),
+		automaticSize = Enum.AutomaticSize.Y,
+	}, _exp, React.createElement(Frame, {
+		size = UDim2.new(1, 0, 0, height),
+		backgroundColor = theme.palette.surface1,
+		backgroundTransparency = 1,
+		cornerRadius = UDim.new(0, rem(3)),
+	}, _exp_1, React.createElement(HStack, {
+		spacing = spacing,
+	}, _exp_2, _newValue)), children)
+end
+return {
+	SegmentedToggle = SegmentedToggle,
+}

package/dist/layout/SegmentedToggle.story.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+declare const story: {
+    react: typeof React;
+    reactRoblox: typeof ReactRoblox;
+    controls: {};
+    story: () => JSX.Element;
+};
+export = story;
+//# sourceMappingURL=SegmentedToggle.story.d.ts.map

package/dist/layout/SegmentedToggle.story.luau

@@ -0,0 +1,72 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local _rem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem"))
+local RemProvider = _rem.RemProvider
+local useRem = _rem.useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local SegmentedToggle = TS.import(script, script.Parent, "SegmentedToggle").SegmentedToggle
+local controls = {}
+local SegmentedToggleStory = function()
+	local rem = useRem()
+	local demoOptions = { {
+		id = "Folder",
+		label = "Folder",
+	}, {
+		id = "Model",
+		label = "Model",
+	}, {
+		id = "Asset",
+		label = "Asset",
+	} }
+	local selection, setSelection = useState(demoOptions[1].id)
+	return React.createElement(RemProvider, {
+		baseRem = 16,
+		maximumRem = 32,
+	}, React.createElement(VStack, {
+		size = UDim2.new(1, 0, 1, 0),
+		spacing = rem(2),
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+	}, React.createElement(SegmentedToggle, {
+		label = "Output Type",
+		options = demoOptions,
+		value = selection,
+		onChange = setSelection,
+	}), React.createElement(Text, {
+		text = `Selected: {selection}`,
+		textSize = rem(3),
+		textScaled = true,
+		textColor = defaultTheme.palette.text,
+		size = UDim2.new(0, rem(50), 0, rem(4)),
+		textXAlignment = "Center",
+	}), React.createElement(SegmentedToggle, {
+		label = "Disabled Example",
+		options = { {
+			id = "DisabledFolder",
+			label = "Folder",
+			disabled = true,
+		}, {
+			id = "DisabledModel",
+			label = "Model",
+		} },
+		value = "DisabledModel",
+		onChange = function() end,
+		disabled = true,
+		size = "small",
+	})))
+end
+local story = {
+	react = React,
+	reactRoblox = ReactRoblox,
+	controls = controls,
+	story = function()
+		return React.createElement(SegmentedToggleStory)
+	end,
+}
+return story

package/dist/table/ExampleTable.d.ts

@@ -0,0 +1,2 @@
+export declare function ExampleTable(): JSX.Element;
+//# sourceMappingURL=ExampleTable.d.ts.map

package/dist/table/ExampleTable.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local Table = TS.import(script, script.Parent, "Table").Table
+local TableCell = TS.import(script, script.Parent, "TableCell").TableCell
+local TableHeader = TS.import(script, script.Parent, "TableHeader").TableHeader
+local TableRow = TS.import(script, script.Parent, "TableRow").TableRow
+local function ExampleTable()
+	return React.createElement(Table, {
+		size = UDim2.new(0.8, 0, 0, 200),
+		backgroundTransparency = 1,
+		position = UDim2.new(0.1, 0, 0.1, 0),
+	}, React.createElement(TableHeader, {
+		size = UDim2.new(1, 0, 0, 30),
+	}, React.createElement(TableCell, {
+		size = UDim2.new(0.2, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "ID",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Name",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Score",
+	}))), React.createElement(TableRow, {
+		size = UDim2.new(1, 0, 0, 30),
+	}, React.createElement(TableCell, {
+		size = UDim2.new(0.2, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "1",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Alice",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "95",
+	}))))
+end
+return {
+	ExampleTable = ExampleTable,
+}

package/dist/table/Table.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly position?: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function Table({ children, size, position, layoutOrder, backgroundTransparency }: TableProps): JSX.Element;
+export type { TableProps };
+//# sourceMappingURL=Table.d.ts.map

package/dist/table/Table.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local function Table(_param)
+	local children = _param.children
+	local size = _param.size
+	local position = _param.position
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	return React.createElement(VStack, {
+		size = size,
+		position = position,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	Table = Table,
+}

package/dist/table/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableCellProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableCell({ children, size, layoutOrder, backgroundTransparency }: TableCellProps): JSX.Element;
+export type { TableCellProps };
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/table/TableCell.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local function TableCell(_param)
+	local children = _param.children
+	local size = _param.size
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	local rem = useRem()
+	return React.createElement(Frame, {
+		size = size,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	TableCell = TableCell,
+}

package/dist/table/TableFooter.d.ts

@@ -0,0 +1,9 @@
+import { type HStackProps as StackProps } from "@rbxts-ui/layout";
+interface TableFooterProps extends StackProps {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableFooter(props: TableFooterProps): JSX.Element;
+export type { TableFooterProps };
+//# sourceMappingURL=TableFooter.d.ts.map

package/dist/table/TableFooter.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableFooter(props)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HStack, _attributes, props.children)
+end
+return {
+	TableFooter = TableFooter,
+}

package/dist/table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+import { type HStackProps as StackProps } from "@rbxts-ui/layout";
+interface TableHeaderProps extends StackProps {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+export type { TableHeaderProps };
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/table/TableHeader.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableHeader(props)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HStack, _attributes, props.children)
+end
+return {
+	TableHeader = TableHeader,
+}

package/dist/table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableRowProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableRow({ children, size, layoutOrder, backgroundTransparency }: TableRowProps): JSX.Element;
+export type { TableRowProps };
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/table/TableRow.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableRow(_param)
+	local children = _param.children
+	local size = _param.size
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	return React.createElement(HStack, {
+		size = size,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	TableRow = TableRow,
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+interface TooltipProps {
+    text: string;
+    visible: boolean;
+    position?: UDim2;
+    offsetX?: number;
+    offsetY?: number;
+    backgroundColor?: Color3;
+    textColor?: Color3;
+    maxWidth?: number;
+    anchorPoint?: Vector2;
+}
+export declare function Tooltip({ text, visible, position, backgroundColor, textColor, anchorPoint, maxWidth, offsetX, offsetY, }: TooltipProps): JSX.Element | undefined;
+export type { TooltipProps };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/tooltip/Tooltip.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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function Tooltip(_param)
+	local text = _param.text
+	local visible = _param.visible
+	local position = _param.position
+	local backgroundColor = _param.backgroundColor
+	if backgroundColor == nil then
+		backgroundColor = defaultTheme.palette.black
+	end
+	local textColor = _param.textColor
+	if textColor == nil then
+		textColor = defaultTheme.palette.white
+	end
+	local anchorPoint = _param.anchorPoint
+	if anchorPoint == nil then
+		anchorPoint = Vector2.new(0.5, 0.5)
+	end
+	local maxWidth = _param.maxWidth
+	if maxWidth == nil then
+		maxWidth = 200
+	end
+	local offsetX = _param.offsetX
+	if offsetX == nil then
+		offsetX = 0
+	end
+	local offsetY = _param.offsetY
+	if offsetY == nil then
+		offsetY = 0
+	end
+	local rem = useRem()
+	local theme = defaultTheme
+	if not visible or not position then
+		return nil
+	end
+	local cornerRadius = UDim.new(0, rem(2))
+	return React.createElement(Text, {
+		backgroundColor = backgroundColor,
+		backgroundTransparency = 0.2,
+		text = text,
+		textSize = rem(2),
+		lineHeight = 1.5,
+		textColor = textColor,
+		font = theme.fonts.inter.medium,
+		position = UDim2.new(0, position.X.Offset + offsetX, 0, position.Y.Offset + offsetY),
+		size = UDim2.new(0, rem(maxWidth), 0, 0),
+		textYAlignment = "Center",
+		textXAlignment = "Left",
+		automaticSize = Enum.AutomaticSize.Y,
+		textWrapped = true,
+		cornerRadius = cornerRadius,
+		anchorPoint = anchorPoint,
+	}, React.createElement(Padding, {
+		paddingX = rem(2),
+		paddingY = rem(1.5),
+	}))
+end
+return {
+	Tooltip = Tooltip,
+}

package/dist/tooltip/useTooltip.d.ts

@@ -0,0 +1,12 @@
+export declare function useTooltip(text?: string): {
+    tooltipProps: {
+        text: string;
+        visible: boolean;
+        position: Vector2 | undefined;
+    };
+    tooltipEvents: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+};
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/tooltip/useTooltip.luau

@@ -0,0 +1,40 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local useState = TS.import(script, TS.getModule(script, "@rbxts", "react")).useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+local function useTooltip(text)
+	local visible, setVisible = useState(false)
+	local position, setPosition = useState(nil)
+	local showTooltip = function()
+		if not (text ~= "" and text) then
+			return nil
+		end
+		-- Get mouse position
+		local mouseLocation = UserInputService:GetMouseLocation()
+		setPosition(Vector2.new(mouseLocation.X, mouseLocation.Y))
+		setVisible(true)
+	end
+	local hideTooltip = function()
+		setVisible(false)
+	end
+	local _object = {}
+	local _left = "tooltipProps"
+	local _object_1 = {}
+	local _left_1 = "text"
+	local _condition = text
+	if _condition == nil then
+		_condition = ""
+	end
+	_object_1[_left_1] = _condition
+	_object_1.visible = visible
+	_object_1.position = position
+	_object[_left] = _object_1
+	_object.tooltipEvents = {
+		onMouseEnter = showTooltip,
+		onMouseLeave = hideTooltip,
+	}
+	return _object
+end
+return {
+	useTooltip = useTooltip,
+}