@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

package/out/ui/packages/table/components/Table.styles.luau

@@ -0,0 +1,70 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useTableStyles = componentStyles("Table", function(theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		row = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Active = true,
+			Selectable = true,
+		},
+		selected = {
+			BackgroundColor3 = theme.palette.action.selected,
+			BackgroundTransparency = 0,
+		},
+		header = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+		},
+		cells = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		cell = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		headerCell = {
+			Font = theme.typography.fontFamilies.semibold,
+			TextColor3 = theme.palette.text.secondary,
+		},
+		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.5)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useTableStyles
+return {
+	default = default,
+}

package/out/ui/packages/table/components/rowSelected.d.ts

@@ -0,0 +1 @@
+export declare function rowSelected(index: number, selected?: number): boolean;

package/out/ui/packages/table/components/rowSelected.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function rowSelected(index, selected)
+	return selected ~= nil and selected == index
+end
+return {
+	rowSelected = rowSelected,
+}

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

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

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

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

package/out/ui/packages/tabs/components/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { ChoiceOption } from "../../radioGroup/index";
+export interface TabsProps<T> {
+    value: T;
+    options: ChoiceOption<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+}
+declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
+export default Tabs;

package/out/ui/packages/tabs/components/Tabs.luau

@@ -0,0 +1,113 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
+local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
+local function Tabs(props)
+	local _binding = props
+	local value = _binding.value
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useTabsStyles()
+	local choose = function(index)
+		local choice = options[index + 1]
+		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
+			onChange(choice.value)
+		end
+	end
+	local onKey = function(_, input)
+		-- ▼ ReadonlyArray.findIndex ▼
+		local _callback = function(option)
+			return option.value == value
+		end
+		local _result = -1
+		for _i, _v in options do
+			if _callback(_v, _i - 1, options) == true then
+				_result = _i - 1
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.findIndex ▲
+		local index = _result
+		if input.KeyCode == Enum.KeyCode.Left then
+			choose(stepChoice(options, index, -1))
+		elseif input.KeyCode == Enum.KeyCode.Right then
+			choose(stepChoice(options, index, 1))
+		end
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Tabs"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	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
+	end
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(choice, index)
+		local active = canActivate(disabled or choice.disabled)
+		local selected = choice.value == value
+		local _attributes_2 = {
+			key = `{choice.label}-{index}`,
+		}
+		for _k, _v in cx(styles.tab, selected and styles.selected, not active and styles.disabledTab) do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = choice.label
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Active = active
+		_attributes_2.Selectable = active
+		_attributes_2.Event = {
+			Activated = function()
+				return choose(index)
+			end,
+			InputBegan = onKey,
+		}
+		local _attributes_3 = table.clone(styles.padding)
+		setmetatable(_attributes_3, nil)
+		local _exp_1 = React.createElement("uipadding", _attributes_3)
+		local _condition_1 = selected
+		if _condition_1 then
+			local _attributes_4 = {
+				key = "Indicator",
+			}
+			for _k, _v in styles.indicator do
+				_attributes_4[_k] = _v
+			end
+			_condition_1 = React.createElement("frame", _attributes_4)
+		end
+		return React.createElement("textbutton", _attributes_2, _exp_1, _condition_1)
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("scrollingframe", _attributes, _exp, _newValue)
+end
+local default = Tabs
+return {
+	default = default,
+}

package/out/ui/packages/tabs/components/Tabs.styles.d.ts

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

package/out/ui/packages/tabs/components/Tabs.styles.luau

@@ -0,0 +1,55 @@
+-- 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 useTabsStyles = componentStyles("Tabs", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2.5)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			CanvasSize = UDim2.fromScale(0, 0),
+			AutomaticCanvasSize = Enum.AutomaticSize.X,
+			ScrollingDirection = Enum.ScrollingDirection.X,
+			HorizontalScrollBarInset = Enum.ScrollBarInset.Always,
+			ScrollBarThickness = theme.padding.calc(0.5),
+			ScrollBarImageColor3 = theme.palette.text.secondary,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		tab = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.fromScale(0, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			TextColor3 = theme.palette.text.secondary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+		},
+		selected = {
+			TextColor3 = theme.palette.text.primary,
+		},
+		disabledTab = {
+			TextTransparency = 0.5,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		indicator = {
+			Size = UDim2.new(1, theme.padding.calc(4), 0, theme.padding.calc(0.5)),
+			Position = UDim2.fromScale(0.5, 1),
+			AnchorPoint = Vector2.new(0.5, 1),
+			BackgroundColor3 = theme.palette.primary.main,
+			BorderSizePixel = 0,
+		},
+	})
+end)
+local default = useTabsStyles
+return {
+	default = default,
+}

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

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

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

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

package/out/ui/packages/toast/components/Toast.luau

@@ -19,6 +19,7 @@ local function Toast(props)
 		duration = 4
 	end
 	local className = _binding.className
+	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useToastStyles(props)
@@ -71,6 +72,11 @@ local function Toast(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _exp = React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = UDim.new(0, DEFAULT_THEME.shape.borderRadius),

package/out/ui/packages/toast/components/Toast.styles.luau

@@ -2,36 +2,49 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
-local makeStyles = _theme.makeStyles
+local componentStyles = _theme.componentStyles
 local DEFAULT_THEME = _theme.DEFAULT_THEME
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local ToastVariants = TS.import(script, script.Parent.Parent, "enums", "ToastVariants").default
-local useToastStyles = makeStyles(function(theme, _param)
+local useToastStyles = componentStyles("Toast", function(theme, _param)
 	local variant = _param.variant
 	if variant == nil then
 		variant = ToastVariants.default
 	end
-	local getToastColor = function()
+	local getToastColors = function()
 		repeat
 			if variant == (ToastVariants.success) then
-				return DEFAULT_THEME.palette.success.main
+				return {
+					background = theme.palette.status.success.main,
+					content = theme.palette.status.success.on,
+				}
 			end
 			if variant == (ToastVariants.error) then
-				return DEFAULT_THEME.palette.error.main
+				return {
+					background = theme.palette.status.error.main,
+					content = theme.palette.status.error.on,
+				}
 			end
 			if variant == (ToastVariants.warning) then
-				return DEFAULT_THEME.palette.warning.main
+				return {
+					background = theme.palette.status.warning.main,
+					content = theme.palette.status.warning.on,
+				}
 			end
-			return DEFAULT_THEME.options.constants.colors.backgroundUIContrast
+			return {
+				background = theme.palette.surface.overlay,
+				content = theme.palette.text.primary,
+			}
 		until true
 	end
+	local toastColors = getToastColors()
 	local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
 	local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
 	return createStyles({
 		container = {
 			Size = UDim2.new(0, theme.spacing.calc(20), 0, theme.spacing.calc(4)),
 			Position = INACTIVE_POSITION,
-			BackgroundColor3 = getToastColor(),
+			BackgroundColor3 = toastColors.background,
 			AnchorPoint = Vector2.new(0.5, 1),
 			BorderSizePixel = 0,
 			ZIndex = 50000,
@@ -43,7 +56,7 @@ local useToastStyles = makeStyles(function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = theme.options.constants.extendedPalette.Common.White,
+			TextColor3 = toastColors.content,
 			Font = theme.typography.fontFamilies.default,
 			TextScaled = false,
 			ZIndex = 50001,
@@ -52,7 +65,7 @@ local useToastStyles = makeStyles(function(theme, _param)
 			Size = UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1)),
 			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(1, 0),
-			ImageColor3 = theme.options.constants.colors.iconDefault,
+			ImageColor3 = toastColors.content,
 			Image = Icons.Close,
 			BackgroundTransparency = 1,
 			AutoButtonColor = false,

package/out/ui/packages/tooltip/components/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface TooltipProps {
+    text: string;
+    delay?: number;
+}
+declare function Tooltip(props: CustomizedProps<Frame, TooltipProps>): JSX.Element;
+export default Tooltip;

package/out/ui/packages/tooltip/components/Tooltip.luau

@@ -0,0 +1,119 @@
+-- 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 useState = _react.useState
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local useTooltipStyles = TS.import(script, script.Parent, "Tooltip.styles").default
+local function Tooltip(props)
+	local _binding = props
+	local text = _binding.text
+	local delay = _binding.delay
+	if delay == nil then
+		delay = 0.4
+	end
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useTooltipStyles()
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local padX = theme.padding.calc(2)
+	local padY = theme.padding.default
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+		if _condition == nil then
+			_condition = 14
+		end
+	end
+	local textSize = _condition
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local textBounds = TextService:GetTextSize(text, textSize, font, Vector2.new(theme.spacing.calc(24), 10000))
+	local tipWidth = textBounds.X + padX * 2
+	local tipHeight = textBounds.Y + padY * 2
+	local anchor, setAnchor = useState()
+	local shown, setShown = useState(false)
+	local pending = useRef()
+	local cancel = function()
+		if pending.current then
+			task.cancel(pending.current)
+		end
+		pending.current = nil
+	end
+	useEffect(function()
+		return cancel
+	end, {})
+	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 = "Tooltip"
+	end
+	_attributes.key = _condition_1
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	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
+	end
+	_attributes.Event = {
+		MouseEnter = function(rbx)
+			setAnchor(rbx)
+			cancel()
+			pending.current = task.delay(delay, function()
+				pending.current = nil
+				setShown(true)
+			end)
+		end,
+		MouseLeave = function()
+			cancel()
+			setShown(false)
+		end,
+	}
+	local _exp = children
+	local _condition_2 = shown and text ~= ""
+	if _condition_2 then
+		local _attributes_1 = {
+			key = "Tip",
+		}
+		for _k, _v in styles.label do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Text = text
+		_attributes_1.Size = UDim2.fromScale(1, 1)
+		_attributes_1.AutomaticSize = Enum.AutomaticSize.None
+		_attributes_1.TextWrapped = true
+		local _attributes_2 = table.clone(styles.padding)
+		setmetatable(_attributes_2, nil)
+		local _exp_1 = React.createElement("uipadding", _attributes_2)
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		local _exp_2 = React.createElement("uicorner", _attributes_3)
+		local _attributes_4 = table.clone(styles.stroke)
+		setmetatable(_attributes_4, nil)
+		_condition_2 = (React.createElement(Popup, {
+			anchor = anchor,
+			preferredWidth = tipWidth,
+			preferredHeight = tipHeight,
+		}, React.createElement("textlabel", _attributes_1, _exp_1, _exp_2, React.createElement("uistroke", _attributes_4))))
+	end
+	return React.createElement("frame", _attributes, _exp, _condition_2)
+end
+local default = Tooltip
+return {
+	default = default,
+}

package/out/ui/packages/tooltip/components/Tooltip.styles.d.ts

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

package/out/ui/packages/tooltip/components/Tooltip.styles.luau

@@ -0,0 +1,43 @@
+-- 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 useTooltipStyles = componentStyles("Tooltip", function(theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundColor3 = theme.palette.surface.overlay,
+			BorderSizePixel = 0,
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			Interactable = false,
+			ZIndex = 20002,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.padding.default),
+			PaddingBottom = UDim.new(0, theme.padding.default),
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+	})
+end)
+local default = useTooltipStyles
+return {
+	default = default,
+}

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

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

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

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

package/out/ui/packages/treeView/components/TreeView.d.ts

@@ -6,6 +6,7 @@ export interface TreeViewProps {
     tree: Tree;
     icon?: Icons;
     filter?: string;
+    selected?: string;
 }
 declare function TreeView(props: CustomizedProps<DefaultTreeViewComponent, TreeViewProps>): JSX.Element;
 export default TreeView;