@rbxts/uiblox 0.1.0

package/out/ui/packages/input/components/Input.styles.lua

@@ -0,0 +1,156 @@
+-- Compiled with roblox-ts v2.2.0
+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 useInputStyles = makeStyles(function(theme, _param)
+	local color = _param.color
+	if color == nil then
+		color = "primary"
+	end
+	local margin = _param.margin
+	if margin == nil then
+		margin = "none"
+	end
+	local variant = _param.variant
+	if variant == nil then
+		variant = "standard"
+	end
+	local width = _param.width
+	if width == nil then
+		width = UDim.new(0, theme.spacing.calc(8))
+	end
+	local helperText = _param.helperText
+	local clearsTextOnFocus = _param.clearsTextOnFocus
+	if clearsTextOnFocus == nil then
+		clearsTextOnFocus = false
+	end
+	local makeRootStyles = function()
+		local defaultStyles = {}
+		defaultStyles.BackgroundTransparency = 1
+		defaultStyles.BorderSizePixel = 0
+		defaultStyles.Size = UDim2.new(width.Scale, width.Offset, 0, if helperText ~= nil then theme.spacing.calc(4) else theme.spacing.calc(2))
+		-- Increase size vertically to account for margin
+		repeat
+			if margin == "none" then
+				break
+			end
+			if margin == "dense" then
+				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
+				break
+			end
+			if margin == "normal" then
+				defaultStyles.Size = UDim2.new(defaultStyles.Size.X.Scale, defaultStyles.Size.X.Offset, defaultStyles.Size.Y.Scale, defaultStyles.Size.Y.Offset + theme.padding.calc(2))
+				break
+			end
+			break
+		until true
+		defaultStyles.ZIndex = 10000
+		return defaultStyles
+	end
+	local makeBoxStyles = function()
+		local defaultStyles = {}
+		defaultStyles.BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary
+		defaultStyles.PlaceholderColor3 = theme.palette.text.secondary
+		defaultStyles.Position = UDim2.new(0, 0, 0, 0)
+		defaultStyles.Size = UDim2.new(1, 0, 0, theme.spacing.calc(2))
+		repeat
+			if variant == "filled" then
+				defaultStyles.BackgroundTransparency = 0
+				defaultStyles.BorderSizePixel = 0
+				break
+			end
+			if variant == "outlined" then
+				defaultStyles.TextColor3 = theme.palette.text.primary
+				defaultStyles.BackgroundTransparency = 1
+				defaultStyles.BorderSizePixel = theme.options.constants.borders.default
+				break
+			end
+			if variant == "standard" then
+				defaultStyles.TextColor3 = theme.palette.text.primary
+				defaultStyles.BackgroundTransparency = 1
+				defaultStyles.BorderSizePixel = 0
+				break
+			end
+			defaultStyles.BackgroundTransparency = 0
+			defaultStyles.BorderSizePixel = 0
+			break
+		until true
+		defaultStyles.TextXAlignment = Enum.TextXAlignment.Left
+		defaultStyles.ClearTextOnFocus = clearsTextOnFocus
+		defaultStyles.ZIndex = 12000
+		return defaultStyles
+	end
+	local makeMarginStyles = function()
+		local defaultStyles = {}
+		defaultStyles.BackgroundTransparency = 1
+		defaultStyles.BorderSizePixel = 0
+		-- Center in root
+		defaultStyles.Position = UDim2.new(0.5, 0, 0.5, 0)
+		defaultStyles.AnchorPoint = Vector2.new(0.5, 0.5)
+		-- Margin controls vertical spacing around the input component
+		repeat
+			if margin == "none" then
+				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
+				break
+			end
+			if margin == "dense" then
+				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(2), 1, -theme.padding.calc(2))
+				break
+			end
+			if margin == "normal" then
+				defaultStyles.Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4))
+				break
+			end
+			defaultStyles.Size = UDim2.new(1, -theme.padding.calc(0), 1, 0)
+			break
+		until true
+		defaultStyles.ZIndex = 11000
+		return defaultStyles
+	end
+	return createStyles({
+		root = makeRootStyles(),
+		font = {
+			TextSize = theme.typography.fontSizes.button,
+			Font = theme.typography.fontFamilies.default,
+		},
+		margin = makeMarginStyles(),
+		box = makeBoxStyles(),
+		helper = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Position = UDim2.new(0, 0, 1, 0),
+			AnchorPoint = Vector2.new(0, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			ZIndex = 11000,
+		},
+		errorColorFrame = {
+			BackgroundColor3 = theme.palette.error.main,
+			BorderColor3 = theme.palette.error.main,
+		},
+		errorColorText = {
+			TextColor3 = theme.palette.error.main,
+			BackgroundColor3 = theme.palette.error.main,
+			BorderColor3 = theme.palette.error.main,
+		},
+		divider = {
+			Position = UDim2.new(0, 0, 0, theme.spacing.calc(2)),
+			BackgroundColor3 = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
+			ZIndex = 11000,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = if color == "primary" then theme.palette.secondary.main else theme.palette.text.primary,
+			Transparency = 0,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+	})
+end)
+local default = useInputStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,6 @@
+export { default as Input } from "./components/Input";
+export { InputProps } from "./components/Input";
+export * from "./components/Input";
+export { InputColor } from "./types";
+export { InputMargin } from "./types";
+export { InputVariant } from "./types";

package/out/ui/packages/input/init.lua

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.Input = TS.import(script, script, "components", "Input").default
+for _k, _v in TS.import(script, script, "components", "Input") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/input/types/InputColor.d.ts

@@ -0,0 +1 @@
+export type InputColor = "primary" | "secondary";

package/out/ui/packages/input/types/InputColor.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/input/types/InputMargin.d.ts

@@ -0,0 +1 @@
+export type InputMargin = "none" | "dense" | "normal";

package/out/ui/packages/input/types/InputMargin.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/input/types/InputVariant.d.ts

@@ -0,0 +1 @@
+export type InputVariant = "filled" | "outlined" | "standard";

package/out/ui/packages/input/types/InputVariant.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/input/types/index.d.ts

@@ -0,0 +1,3 @@
+export { InputColor } from "./InputColor";
+export { InputMargin } from "./InputMargin";
+export { InputVariant } from "./InputVariant";

package/out/ui/packages/input/types/init.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/progressBar/components/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@rbxts/types" />
+import Roact from "@rbxts/roact";
+import { WriteableStyle } from "../../../../theme";
+export interface ProgressBarProps {
+    progress: number;
+    className?: WriteableStyle<Frame>;
+}
+declare const ProgressBar: (props: ProgressBarProps) => Roact.Element;
+export default ProgressBar;

package/out/ui/packages/progressBar/components/ProgressBar.lua

@@ -0,0 +1,76 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
+local ProgressBar = withHooks(function(_param)
+	local progress = _param.progress
+	local className = _param.className
+	local _binding = useProgressBarStyles()
+	local container = _binding.container
+	local outer = _binding.outer
+	local stroke = _binding.stroke
+	local inner = _binding.inner
+	local fill = _binding.fill
+	local corner = _binding.corner
+	local _attributes = {}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _children = {}
+	local _length = #_children
+	local _attributes_1 = {}
+	for _k, _v in outer do
+		_attributes_1[_k] = _v
+	end
+	local _children_1 = {}
+	local _length_1 = #_children_1
+	local _attributes_2 = {}
+	for _k, _v in corner do
+		_attributes_2[_k] = _v
+	end
+	_children_1.Corner = Roact.createElement("UICorner", _attributes_2)
+	local _attributes_3 = {}
+	for _k, _v in stroke do
+		_attributes_3[_k] = _v
+	end
+	_children_1[_length_1 + 1] = Roact.createElement("UIStroke", _attributes_3)
+	local _attributes_4 = {}
+	for _k, _v in inner do
+		_attributes_4[_k] = _v
+	end
+	local _children_2 = {}
+	local _length_2 = #_children_2
+	local _attributes_5 = {}
+	for _k, _v in corner do
+		_attributes_5[_k] = _v
+	end
+	_children_2.Corner = Roact.createElement("UICorner", _attributes_5)
+	local _attributes_6 = {}
+	for _k, _v in fill do
+		_attributes_6[_k] = _v
+	end
+	_attributes_6.Size = UDim2.new(progress / 100, 0, 1, 0)
+	local _children_3 = {}
+	local _length_3 = #_children_3
+	local _attributes_7 = {}
+	for _k, _v in corner do
+		_attributes_7[_k] = _v
+	end
+	_children_3.Corner = Roact.createElement("UICorner", _attributes_7)
+	_children_2[_length_2 + 1] = Roact.createElement("Frame", _attributes_6, _children_3)
+	_children_1[_length_1 + 2] = Roact.createElement("Frame", _attributes_4, _children_2)
+	_children.Bar = Roact.createElement("Frame", _attributes_1, _children_1)
+	return Roact.createFragment({
+		ProgressBar = Roact.createElement("Frame", _attributes, _children),
+	})
+end)
+local default = ProgressBar
+return {
+	default = default,
+}

package/out/ui/packages/progressBar/components/ProgressBar.styles.d.ts

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

package/out/ui/packages/progressBar/components/ProgressBar.styles.lua

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v2.2.0
+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 useProgressBarStyles = makeStyles(function(theme)
+	return createStyles({
+		container = {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 110001,
+		},
+		outer = {
+			Size = UDim2.new(1, 0, 1, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 110001,
+		},
+		stroke = {
+			Thickness = theme.options.constants.borders.divider,
+			Color = theme.palette.text.primary,
+		},
+		inner = {
+			Size = UDim2.new(1, -theme.options.constants.borders.divider * 2, 1, -theme.options.constants.borders.divider * 2),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ClipsDescendants = true,
+			ZIndex = 110001,
+		},
+		fill = {
+			Position = UDim2.new(0, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = theme.palette.text.primary,
+			BorderSizePixel = 0,
+			ZIndex = 110001,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useProgressBarStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from "./components/ProgressBar";
+export { ProgressBarProps } from "./components/ProgressBar";
+export * from "./components/ProgressBar";

package/out/ui/packages/progressBar/init.lua

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.ProgressBar = TS.import(script, script, "components", "ProgressBar").default
+for _k, _v in TS.import(script, script, "components", "ProgressBar") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/shadow/components/Shadow.d.ts

@@ -0,0 +1,3 @@
+import Roact from "@rbxts/roact";
+declare const Shadow: (props: {}) => Roact.Element;
+export default Shadow;

package/out/ui/packages/shadow/components/Shadow.lua

@@ -0,0 +1,72 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
+local withHooks = _roact_hooked.withHooks
+local useEffect = _roact_hooked.useEffect
+local useState = _roact_hooked.useState
+local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
+local Shadow = withHooks(function()
+	local _binding = useShadowStyles()
+	local container = _binding.container
+	local parent, setParent = useState(nil)
+	local cornerRadius, setCornerRadius = useState()
+	local _condition = container.ZIndex
+	if _condition == nil then
+		_condition = 0
+	end
+	local defaultZIndex = _condition
+	local zIndex, setZIndex = useState(defaultZIndex)
+	-- Set any inherited properties
+	useEffect(function()
+		if not parent then
+			return nil
+		end
+		local _cornerRadius = parent
+		if _cornerRadius ~= nil then
+			_cornerRadius = _cornerRadius:FindFirstChildOfClass("UICorner")
+			if _cornerRadius ~= nil then
+				_cornerRadius = _cornerRadius.CornerRadius
+			end
+		end
+		local cornerRadius = _cornerRadius
+		setCornerRadius(cornerRadius)
+		local _result = parent
+		if _result ~= nil then
+			_result = _result.ZIndex
+		end
+		local _condition_1 = _result
+		if _condition_1 == nil then
+			_condition_1 = defaultZIndex
+		end
+		setZIndex(_condition_1 - 1)
+		parent.ClipsDescendants = false
+	end, { parent })
+	local _attributes = {}
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
+	_attributes.ZIndex = zIndex
+	_attributes[Roact.Event.AncestryChanged] = function(rbx, parent)
+		if parent:IsA("GuiObject") and rbx.Parent == parent then
+			setParent(parent)
+		end
+	end
+	local _children = {}
+	local _length = #_children
+	local _child = cornerRadius ~= nil and Roact.createFragment({
+		Corner = Roact.createElement("UICorner", {
+			CornerRadius = cornerRadius,
+		}),
+	})
+	if _child then
+		_children[_length + 1] = _child
+	end
+	return Roact.createFragment({
+		Shadow = Roact.createElement("Frame", _attributes, _children),
+	})
+end)
+local default = Shadow
+return {
+	default = default,
+}

package/out/ui/packages/shadow/components/Shadow.styles.d.ts

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

package/out/ui/packages/shadow/components/Shadow.styles.lua

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v2.2.0
+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 useShadowStyles = makeStyles(function(theme)
+	return createStyles({
+		container = {
+			Size = UDim2.new(1, theme.spacing.calc(0.25), 1, theme.spacing.calc(0.25)),
+			BackgroundColor3 = theme.options.constants.colors.backgroundUIContrast,
+			BackgroundTransparency = 0.8,
+			BorderSizePixel = 0,
+			ZIndex = -100,
+		},
+	})
+end)
+local default = useShadowStyles
+return {
+	default = default,
+}

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

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

package/out/ui/packages/shadow/init.lua

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.Shadow = TS.import(script, script, "components", "Shadow").default
+for _k, _v in TS.import(script, script, "components", "Shadow") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/sidebar/components/Sidebar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
+import Roact from "@rbxts/roact";
+import { CustomizedProps } from "../../../../theme";
+export type DefaultSidebarComponent = Frame;
+export interface SidebarProps {
+    size: "compact" | "large";
+    ignoreInset?: boolean;
+}
+declare function Sidebar<T extends DefaultSidebarComponent>(props: CustomizedProps<T, SidebarProps>): Roact.Element;
+export default Sidebar;

package/out/ui/packages/sidebar/components/Sidebar.lua

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local useSidebarStyles = TS.import(script, script.Parent, "Sidebar.styles").default
+local function Sidebar(props)
+	local _binding = props
+	local className = _binding.className
+	local children = _binding[Roact.Children]
+	local _binding_1 = useSidebarStyles(props)
+	local root = _binding_1.root
+	local container = _binding_1.container
+	local _attributes = {}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _children = {}
+	local _length = #_children
+	local _attributes_1 = {}
+	for _k, _v in container do
+		_attributes_1[_k] = _v
+	end
+	local _children_1 = {}
+	local _length_1 = #_children_1
+	if children then
+		for _k, _v in children do
+			if type(_k) == "number" then
+				_children_1[_length_1 + _k] = _v
+			else
+				_children_1[_k] = _v
+			end
+		end
+	end
+	_children.Container = Roact.createElement("Frame", _attributes_1, _children_1)
+	return Roact.createFragment({
+		Sidebar = Roact.createElement("Frame", _attributes, _children),
+	})
+end
+local default = Sidebar
+return {
+	default = default,
+}

package/out/ui/packages/sidebar/components/Sidebar.styles.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProps } from "./Sidebar";
+declare const useSidebarStyles: (props: SidebarProps) => import("../../../../theme").ClassNameMap<string>;
+export default useSidebarStyles;

package/out/ui/packages/sidebar/components/Sidebar.styles.lua

@@ -0,0 +1,38 @@
+-- Compiled with roblox-ts v2.2.0
+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 ROBLOX_UI_OFFSET = TS.import(script, script.Parent.Parent.Parent.Parent, "constants").ROBLOX_UI_OFFSET
+local useSidebarStyles = makeStyles(function(theme, props)
+	local _binding = props
+	local size = _binding.size
+	local ignoreInset = _binding.ignoreInset
+	if ignoreInset == nil then
+		ignoreInset = false
+	end
+	local sidebarWidths = {
+		large = theme.spacing.calc(15),
+		compact = theme.spacing.calc(5),
+	}
+	return createStyles({
+		root = {
+			Size = UDim2.new(0, if size == "compact" then sidebarWidths.compact else sidebarWidths.large, 1, 0),
+			BackgroundColor3 = theme.options.constants.colors.backgroundUIMuted,
+			BorderSizePixel = 0,
+			ZIndex = 5000,
+		},
+		container = {
+			Size = UDim2.new(1, -theme.padding.calc(4), 1, -(theme.padding.calc(4) + (if ignoreInset then 0 else ROBLOX_UI_OFFSET))),
+			Position = UDim2.new(0.5, 0, 0, theme.padding.calc(2) + (if ignoreInset then 0 else ROBLOX_UI_OFFSET)),
+			AnchorPoint = Vector2.new(0.5, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ZIndex = 5100,
+		},
+	})
+end)
+local default = useSidebarStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,4 @@
+export { default as Sidebar } from "./components/Sidebar";
+export { SidebarProps } from "./components/Sidebar";
+export * from "./components/Sidebar";
+export { SidebarType } from "./types";

package/out/ui/packages/sidebar/init.lua

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.Sidebar = TS.import(script, script, "components", "Sidebar").default
+for _k, _v in TS.import(script, script, "components", "Sidebar") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/sidebar/types/SidebarType.d.ts

@@ -0,0 +1 @@
+export type SidebarType = "compact" | "large";

package/out/ui/packages/sidebar/types/SidebarType.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/sidebar/types/index.d.ts

@@ -0,0 +1 @@
+export { SidebarType } from "./SidebarType";

package/out/ui/packages/sidebar/types/init.lua

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v2.2.0
+return nil

package/out/ui/packages/toast/components/Toast.d.ts

@@ -0,0 +1,11 @@
+import Roact from "@rbxts/roact";
+import ToastVariants from "../enums/ToastVariants";
+export interface ToastProps {
+    text: string;
+    onDismiss: () => void;
+    duration?: number;
+    variant?: ToastVariants;
+    toggledAt?: number;
+}
+declare const Toast: (props: ToastProps) => Roact.Element;
+export default Toast;