@rbxts/uiblox 0.1.0

package/out/ui/packages/divider/components/Divider.lua

@@ -0,0 +1,27 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
+local function Divider(props)
+	local _binding = props
+	local className = _binding.className
+	local _binding_1 = useDividerStyles(props)
+	local root = _binding_1.root
+	local _attributes = {}
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
+	_attributes.BorderSizePixel = 0
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	return Roact.createFragment({
+		Divider = Roact.createElement("Frame", _attributes),
+	})
+end
+local default = Divider
+return {
+	default = default,
+}

package/out/ui/packages/divider/components/Divider.styles.d.ts

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

package/out/ui/packages/divider/components/Divider.styles.lua

@@ -0,0 +1,42 @@
+-- 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 Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
+local useDividerStyles = makeStyles(function(theme, props)
+	local _binding = props
+	local position = _binding.position
+	local orientation = _binding.orientation
+	if orientation == nil then
+		orientation = Orientations.Horizontal
+	end
+	local padding = _binding.padding
+	if padding == nil then
+		padding = theme.padding.calc(2)
+	end
+	local color = _binding.color
+	if color == nil then
+		color = theme.options.constants.colors.divider
+	end
+	local transparency = _binding.transparency
+	if transparency == nil then
+		transparency = 0
+	end
+	local weight = _binding.weight
+	if weight == nil then
+		weight = theme.options.constants.borders.default
+	end
+	return createStyles({
+		root = {
+			Position = position or UDim2.new(0, 0, 0, 0),
+			Size = UDim2.new(if orientation == Orientations.Horizontal then 1 else 0, if orientation == Orientations.Horizontal then -padding * 2 else weight, if orientation == Orientations.Vertical then 1 else 0, if orientation == Orientations.Vertical then -padding * 2 else weight),
+			BackgroundColor3 = color or Color3.fromRGB(255, 255, 255),
+			BackgroundTransparency = transparency,
+		},
+	})
+end)
+local default = useDividerStyles
+return {
+	default = default,
+}

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

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

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

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

package/out/ui/packages/icon/components/Icon.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@rbxts/types" />
+import Roact from "@rbxts/roact";
+import { Icons } from "../../../enums";
+import { CustomizedProps } from "../../../../theme";
+export interface IconProps {
+    icon: Icons;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+    tint?: Color3;
+}
+declare const Icon: (props: CustomizedProps<ImageLabel, IconProps>) => Roact.Element;
+export default Icon;

package/out/ui/packages/icon/components/Icon.lua

@@ -0,0 +1,31 @@
+-- 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 useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
+local Icon = withHooks(function(props)
+	local _binding = props
+	local icon = _binding.icon
+	local tint = _binding.tint
+	local className = _binding.className
+	local _binding_1 = useIconStyles(props)
+	local container = _binding_1.container
+	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
+	_attributes.Image = tostring(icon)
+	_attributes.ImageColor3 = tint or container.ImageColor3
+	return Roact.createFragment({
+		Icon = Roact.createElement("ImageLabel", _attributes),
+	})
+end)
+local default = Icon
+return {
+	default = default,
+}

package/out/ui/packages/icon/components/Icon.styles.d.ts

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

package/out/ui/packages/icon/components/Icon.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 useIconStyles = makeStyles(function(theme, props)
+	local getIconSize = function(props)
+		local _binding = props
+		local size = _binding.size
+		repeat
+			if size == "xxs" then
+				return UDim2.new(0, theme.spacing.calc(0.5), 0, theme.spacing.calc(0.5))
+			end
+			if size == "xs" then
+				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
+			end
+			if size == "sm" then
+				return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
+			end
+			if size == "md" then
+				return UDim2.new(0, theme.spacing.calc(3), 0, theme.spacing.calc(3))
+			end
+			if size == "lg" then
+				return UDim2.new(0, theme.spacing.calc(6), 0, theme.spacing.calc(6))
+			end
+			if size == "xl" then
+				return UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(8))
+			end
+			return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
+		until true
+	end
+	return createStyles({
+		container = {
+			Size = getIconSize(props),
+			BackgroundColor3 = theme.palette.secondary.main,
+			ImageColor3 = theme.palette.text.primary,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ZIndex = 12000,
+		},
+	})
+end)
+local default = useIconStyles
+return {
+	default = default,
+}

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

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

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

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

package/out/ui/packages/iconButton/components/IconButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="@rbxts/types" />
+import Roact from "@rbxts/roact";
+import { Icons } from "../../../enums";
+import { CustomizedProps } from "../../../../theme";
+export interface IconButtonProps {
+    icon: Icons;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+    tint: Color3;
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare const IconButton: (props: CustomizedProps<ImageButton, IconButtonProps>) => Roact.Element;
+export default IconButton;

package/out/ui/packages/iconButton/components/IconButton.lua

@@ -0,0 +1,48 @@
+-- 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 useState = _roact_hooked.useState
+local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
+local IconButton = withHooks(function(props)
+	local _binding = props
+	local icon = _binding.icon
+	local selected = _binding.selected
+	local tint = _binding.tint
+	local onClick = _binding.onClick
+	local className = _binding.className
+	local _binding_1 = useIconButtonStyles(props)
+	local container = _binding_1.container
+	local hovering, setHovering = useState(false)
+	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
+	_attributes.BackgroundTransparency = if hovering or selected then 0.5 else 1
+	_attributes.Image = tostring(icon)
+	_attributes.ImageColor3 = tint or container.ImageColor3
+	_attributes[Roact.Event.MouseButton1Click] = function()
+		if onClick then
+			onClick()
+		end
+	end
+	_attributes[Roact.Event.MouseEnter] = function()
+		setHovering(true)
+	end
+	_attributes[Roact.Event.MouseLeave] = function()
+		setHovering(false)
+	end
+	return Roact.createFragment({
+		IconButton = Roact.createElement("ImageButton", _attributes),
+	})
+end)
+local default = IconButton
+return {
+	default = default,
+}

package/out/ui/packages/iconButton/components/IconButton.styles.d.ts

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

package/out/ui/packages/iconButton/components/IconButton.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 useIconButtonStyles = makeStyles(function(theme, props)
+	local getIconSize = function(props)
+		local _binding = props
+		local size = _binding.size
+		repeat
+			if size == "xxs" then
+				return UDim2.new(0, theme.spacing.calc(0.5), 0, theme.spacing.calc(0.5))
+			end
+			if size == "xs" then
+				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
+			end
+			if size == "sm" then
+				return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
+			end
+			if size == "md" then
+				return UDim2.new(0, theme.spacing.calc(3), 0, theme.spacing.calc(3))
+			end
+			if size == "lg" then
+				return UDim2.new(0, theme.spacing.calc(6), 0, theme.spacing.calc(6))
+			end
+			if size == "xl" then
+				return UDim2.new(0, theme.spacing.calc(8), 0, theme.spacing.calc(8))
+			end
+			return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
+		until true
+	end
+	return createStyles({
+		container = {
+			Size = getIconSize(props),
+			BackgroundColor3 = theme.palette.secondary.main,
+			ImageColor3 = theme.palette.text.primary,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ZIndex = 12000,
+		},
+	})
+end)
+local default = useIconButtonStyles
+return {
+	default = default,
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+export * from "./divider";
+export * from "./icon";
+export * from "./iconButton";
+export * from "./input";
+export * from "./progressBar";
+export * from "./shadow";
+export * from "./sidebar";
+export * from "./toast";
+export * from "./treeView";
+export * from "./typography";
+export * from "./button";

package/out/ui/packages/init.lua

@@ -0,0 +1,37 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "divider") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "icon") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "iconButton") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "input") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "progressBar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "shadow") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "sidebar") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "toast") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "treeView") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "typography") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "button") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/input/components/Input.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+import Roact from "@rbxts/roact";
+import { CustomizedProps } from "../../../../theme";
+import { InputColor, InputMargin, InputVariant } from "../types";
+export type DefaultInputComponent = Frame;
+export interface InputProps {
+    color?: InputColor;
+    disabled?: boolean;
+    hasError?: boolean;
+    helperText?: string;
+    margin?: InputMargin;
+    variant?: InputVariant;
+    width?: UDim;
+    text?: string;
+    placeholder?: string;
+    rounded?: boolean;
+    clearsTextOnFocus?: boolean;
+    onTextChanged?: (text: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPressed?: (text: string) => void;
+}
+declare const Input: (props: CustomizedProps<Frame, InputProps>) => Roact.Element;
+export default Input;

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

@@ -0,0 +1,165 @@
+-- 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 useState = _roact_hooked.useState
+local withHooks = _roact_hooked.withHooks
+local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
+local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
+local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
+local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
+local Input = withHooks(function(props)
+	local _binding = props
+	local text = _binding.text
+	local placeholder = _binding.placeholder
+	local helperText = _binding.helperText
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "standard"
+	end
+	local disabled = _binding.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local hasError = _binding.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local rounded = _binding.rounded
+	if rounded == nil then
+		rounded = false
+	end
+	local onTextChanged = _binding.onTextChanged
+	local onFocus = _binding.onFocus
+	local onBlur = _binding.onBlur
+	local onEnterPressed = _binding.onEnterPressed
+	local className = _binding.className
+	local _binding_1 = useInputStyles(props)
+	local root = _binding_1.root
+	local font = _binding_1.font
+	local margin = _binding_1.margin
+	local box = _binding_1.box
+	local helper = _binding_1.helper
+	local errorColorFrame = _binding_1.errorColorFrame
+	local errorColorText = _binding_1.errorColorText
+	local divider = _binding_1.divider
+	local corner = _binding_1.corner
+	local stroke = _binding_1.stroke
+	local _condition = text
+	if _condition == nil then
+		_condition = ""
+	end
+	local input, setInput = useState(_condition)
+	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 margin do
+		_attributes_1[_k] = _v
+	end
+	local _children_1 = {}
+	local _length_1 = #_children_1
+	local _attributes_2 = {}
+	for _k, _v in font do
+		_attributes_2[_k] = _v
+	end
+	for _k, _v in box do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.Active = not disabled
+	_attributes_2.Text = input
+	_attributes_2.PlaceholderText = placeholder
+	for _k, _v in classNames({
+		[errorColorText] = hasError,
+	}) do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2[Roact.Event.ReturnPressedFromOnScreenKeyboard] = function(rbx)
+		if onEnterPressed then
+			local text = rbx.Text
+			onEnterPressed(text)
+		end
+	end
+	_attributes_2[Roact.Event.Focused] = onFocus
+	_attributes_2[Roact.Event.FocusLost] = function(rbx)
+		if onTextChanged then
+			local text = rbx.Text
+			onTextChanged(text)
+		end
+		if onBlur then
+			onBlur()
+		end
+	end
+	local _condition_1 = variant == "outlined"
+	if _condition_1 then
+		local _attributes_3 = {}
+		for _k, _v in stroke do
+			_attributes_3[_k] = _v
+		end
+		_condition_1 = Roact.createElement("UIStroke", _attributes_3)
+	end
+	local _children_2 = {}
+	local _length_2 = #_children_2
+	if _condition_1 then
+		_children_2[_length_2 + 1] = _condition_1
+	end
+	_length_2 = #_children_2
+	local _condition_2 = rounded
+	if _condition_2 then
+		local _attributes_3 = {}
+		for _k, _v in corner do
+			_attributes_3[_k] = _v
+		end
+		_condition_2 = Roact.createElement("UICorner", _attributes_3)
+	end
+	if _condition_2 then
+		_children_2[_length_2 + 1] = _condition_2
+	end
+	_children_1.Field = Roact.createElement("TextBox", _attributes_2, _children_2)
+	_children_1[_length_1 + 1] = Roact.createElement(Divider, {
+		padding = 0,
+		orientation = Orientations.Horizontal,
+		className = classNames({
+			[errorColorFrame] = hasError,
+			[divider] = true,
+		}),
+	})
+	local _condition_3 = helperText ~= nil
+	if _condition_3 then
+		local _attributes_3 = {}
+		for _k, _v in font do
+			_attributes_3[_k] = _v
+		end
+		for _k, _v in helper do
+			_attributes_3[_k] = _v
+		end
+		for _k, _v in classNames({
+			[errorColorText] = hasError,
+		}) do
+			_attributes_3[_k] = _v
+		end
+		_attributes_3.Text = helperText
+		_condition_3 = (Roact.createFragment({
+			HelperText = Roact.createElement("TextLabel", _attributes_3),
+		}))
+	end
+	if _condition_3 then
+		_children_1[_length_1 + 2] = _condition_3
+	end
+	_children.Margin = Roact.createElement("Frame", _attributes_1, _children_1)
+	return Roact.createFragment({
+		Input = Roact.createElement("Frame", _attributes, _children),
+	})
+end)
+local default = Input
+return {
+	default = default,
+}

package/out/ui/packages/input/components/Input.styles.d.ts

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