@rbxts/uiblox 0.1.53 → 0.2.0-alpha.0

package/out/ui/index.d.ts

@@ -18,11 +18,23 @@ export { Grid } from "./packages/index";
 export { GridProps } from "./packages/index";
 export { List } from "./packages/index";
 export { ListProps } from "./packages/index";
+export { VirtualList } from "./packages/index";
+export { VirtualListProps } from "./packages/index";
+export { VirtualListHandle } from "./packages/index";
+export { VirtualListItemState } from "./packages/index";
+export { VirtualListAlign } from "./packages/index";
 export { Preloader } from "./packages/index";
 export { PreloaderProps } from "./packages/index";
 export { PreloaderAssets as Assets } from "./packages/index";
 export { ProgressBar } from "./packages/index";
 export { ProgressBarProps } from "./packages/index";
+export { LinearProgress } from "./packages/index";
+export { LinearProgressProps } from "./packages/index";
+export { CircularProgress } from "./packages/index";
+export { CircularProgressProps } from "./packages/index";
+export { Skeleton } from "./packages/index";
+export { SkeletonProps } from "./packages/index";
+export { SkeletonText } from "./packages/index";
 export { Shadow } from "./packages/index";
 export { Sidebar } from "./packages/index";
 export { SidebarProps } from "./packages/index";

package/out/ui/init.luau

@@ -14,8 +14,13 @@ exports.IconButton = TS.import(script, script, "packages").IconButton
 exports.Input = TS.import(script, script, "packages").Input
 exports.Grid = TS.import(script, script, "packages").Grid
 exports.List = TS.import(script, script, "packages").List
+exports.VirtualList = TS.import(script, script, "packages").VirtualList
 exports.Preloader = TS.import(script, script, "packages").Preloader
 exports.ProgressBar = TS.import(script, script, "packages").ProgressBar
+exports.LinearProgress = TS.import(script, script, "packages").LinearProgress
+exports.CircularProgress = TS.import(script, script, "packages").CircularProgress
+exports.Skeleton = TS.import(script, script, "packages").Skeleton
+exports.SkeletonText = TS.import(script, script, "packages").SkeletonText
 exports.Shadow = TS.import(script, script, "packages").Shadow
 exports.Sidebar = TS.import(script, script, "packages").Sidebar
 exports.Toast = TS.import(script, script, "packages").Toast

package/out/ui/packages/accordion/components/Accordion.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface AccordionProps {
+    title: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare function Accordion(props: CustomizedProps<Frame, AccordionProps>): JSX.Element;
+export default Accordion;

package/out/ui/packages/accordion/components/Accordion.luau

@@ -0,0 +1,93 @@
+-- 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 useState = _react.useState
+local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
+local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
+local function Accordion(props)
+	local _binding = props
+	local title = _binding.title
+	local controlled = _binding.open
+	local defaultOpen = _binding.defaultOpen
+	local onChange = _binding.onChange
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local localOpen, setLocalOpen = useState(defaultOpen == true)
+	local open = accordionOpen(localOpen, controlled)
+	local styles = useAccordionStyles({
+		open = open,
+	})
+	local toggle = function()
+		local nextOpen = not open
+		if controlled == nil then
+			setLocalOpen(nextOpen)
+		end
+		local _result = onChange
+		if _result ~= nil then
+			_result(nextOpen)
+		end
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Accordion"
+	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.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)
+	local _attributes_3 = {
+		key = "Header",
+	}
+	for _k, _v in styles.header do
+		_attributes_3[_k] = _v
+	end
+	_attributes_3.Event = {
+		Activated = toggle,
+	}
+	local _attributes_4 = table.clone(styles.padding)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_4)
+	local _attributes_5 = {
+		key = "Title",
+	}
+	for _k, _v in styles.title do
+		_attributes_5[_k] = _v
+	end
+	_attributes_5.Text = title
+	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, React.createElement("textlabel", _attributes_5))
+	local _attributes_6 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_6[_k] = _v
+	end
+	local _attributes_7 = table.clone(styles.padding)
+	setmetatable(_attributes_7, nil)
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+end
+local default = Accordion
+return {
+	default = default,
+}

package/out/ui/packages/accordion/components/Accordion.styles.d.ts

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

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -0,0 +1,65 @@
+-- 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 useAccordionStyles = componentStyles("Accordion", function(theme, _param)
+	local open = _param.open
+	if open == nil then
+		open = false
+	end
+	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,
+		},
+		header = {
+			LayoutOrder = 1,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+			Active = true,
+			Selectable = true,
+		},
+		title = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		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)),
+		},
+		body = {
+			LayoutOrder = 2,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Visible = open,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useAccordionStyles
+return {
+	default = default,
+}

package/out/ui/packages/accordion/components/accordionOpen.d.ts

@@ -0,0 +1 @@
+export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;

package/out/ui/packages/accordion/components/accordionOpen.luau

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

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

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

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

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

package/out/ui/packages/assetField/components/AssetField.d.ts

@@ -0,0 +1,10 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface AssetFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    preview?: boolean;
+}
+declare function AssetField(props: CustomizedProps<Frame, AssetFieldProps>): JSX.Element;
+export default AssetField;

package/out/ui/packages/assetField/components/AssetField.luau

@@ -0,0 +1,75 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
+local useAssetFieldStyles = TS.import(script, script.Parent, "AssetField.styles").default
+local assetPreviewUri = TS.import(script, script.Parent, "assetPreviewUri").assetPreviewUri
+local function AssetField(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local placeholder = _binding.placeholder
+	if placeholder == nil then
+		placeholder = "rbxassetid://…"
+	end
+	local preview = _binding.preview
+	if preview == nil then
+		preview = true
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAssetFieldStyles()
+	local uri = if preview == true then assetPreviewUri(value) else nil
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "AssetField"
+	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)
+	local _exp_1 = React.createElement(Input, {
+		text = value,
+		disabled = disabled,
+		placeholder = placeholder,
+		width = UDim.new(1, 0),
+		onInput = onChange,
+	})
+	local _condition_1 = uri ~= nil
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Preview",
+		}
+		for _k, _v in styles.preview do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Image = uri
+		_attributes_2.LayoutOrder = 2
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = (React.createElement("imagelabel", _attributes_2, React.createElement("uicorner", _attributes_3)))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1)
+end
+local default = AssetField
+return {
+	default = default,
+}

package/out/ui/packages/assetField/components/AssetField.styles.d.ts

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

package/out/ui/packages/assetField/components/AssetField.styles.luau

@@ -0,0 +1,33 @@
+-- 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 useAssetFieldStyles = componentStyles("AssetField", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		preview = {
+			Size = UDim2.fromOffset(theme.spacing.calc(4), theme.spacing.calc(4)),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useAssetFieldStyles
+return {
+	default = default,
+}

package/out/ui/packages/assetField/components/assetPreviewUri.d.ts

@@ -0,0 +1 @@
+export declare function assetPreviewUri(value: string): string | undefined;

package/out/ui/packages/assetField/components/assetPreviewUri.luau

@@ -0,0 +1,25 @@
+-- Compiled with roblox-ts v3.0.0
+local function assetPreviewUri(value)
+	if #value == 0 then
+		return nil
+	end
+	if string.sub(value, 1, 13) == "rbxassetid://" then
+		return value
+	end
+	if string.sub(value, 1, 11) == "rbxasset://" then
+		return value
+	end
+	for i = 1, #value do
+		local _value = value
+		local _i = i
+		local _i_1 = i
+		local c = string.sub(_value, _i, _i_1)
+		if c < "0" or c > "9" then
+			return nil
+		end
+	end
+	return `rbxassetid://{value}`
+end
+return {
+	assetPreviewUri = assetPreviewUri,
+}

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

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

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

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

package/out/ui/packages/autocomplete/components/Autocomplete.d.ts

@@ -0,0 +1,5 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { SelectProps } from "../../select/index";
+export type AutocompleteProps<T> = SelectProps<T>;
+declare function Autocomplete<T>(props: CustomizedProps<Frame, AutocompleteProps<T>>): JSX.Element;
+export default Autocomplete;

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -0,0 +1,45 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Select = TS.import(script, script.Parent.Parent.Parent, "select").Select
+local autocompleteSearchable = TS.import(script, script.Parent, "autocompleteSearchable").autocompleteSearchable
+local function Autocomplete(props)
+	local _binding = props
+	local value = _binding.value
+	local values = _binding.values
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local placeholder = _binding.placeholder
+	local searchable = _binding.searchable
+	local reducedMotion = _binding.reducedMotion
+	local size = _binding.size
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _attributes = {
+		value = value,
+		values = values,
+		options = options,
+		onChange = onChange,
+		disabled = disabled,
+		placeholder = placeholder,
+		searchable = autocompleteSearchable(searchable),
+		reducedMotion = reducedMotion,
+		size = size,
+		className = className,
+		sx = sx,
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Autocomplete"
+	end
+	_attributes.id = _condition
+	_attributes.ref = ref
+	return React.createElement(Select, _attributes)
+end
+local default = Autocomplete
+return {
+	default = default,
+}

package/out/ui/packages/autocomplete/components/autocompleteSearchable.d.ts

@@ -0,0 +1 @@
+export declare function autocompleteSearchable(searchable?: boolean): searchable is true | undefined;

package/out/ui/packages/autocomplete/components/autocompleteSearchable.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function autocompleteSearchable(searchable)
+	return searchable ~= false
+end
+return {
+	autocompleteSearchable = autocompleteSearchable,
+}

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

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

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

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

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface AvatarProps {
+    name?: string;
+    image?: string;
+    size?: number;
+}
+declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
+export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local avatarInitials = TS.import(script, script.Parent, "avatarText").avatarInitials
+local useAvatarStyles = TS.import(script, script.Parent, "Avatar.styles").default
+local function Avatar(props)
+	local _binding = props
+	local name = _binding.name
+	if name == nil then
+		name = ""
+	end
+	local image = _binding.image
+	local size = _binding.size
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAvatarStyles({
+		size = size,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Avatar"
+	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.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _result
+	if image ~= nil then
+		local _attributes_2 = {
+			key = "Image",
+		}
+		for _k, _v in styles.image do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Image = image
+		_result = (React.createElement("imagelabel", _attributes_2))
+	else
+		local _attributes_2 = {
+			key = "Initials",
+		}
+		for _k, _v in styles.text do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_2))
+	end
+	return React.createElement("frame", _attributes, _exp, _result)
+end
+local default = Avatar
+return {
+	default = default,
+}

package/out/ui/packages/avatar/components/Avatar.styles.d.ts

@@ -0,0 +1,4 @@
+declare const useAvatarStyles: (props: {
+    size?: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useAvatarStyles;

package/out/ui/packages/avatar/components/Avatar.styles.luau

@@ -0,0 +1,39 @@
+-- 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 useAvatarStyles = componentStyles("Avatar", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = 40
+	end
+	return createStyles({
+		root = {
+			Size = UDim2.fromOffset(size, size),
+			BackgroundColor3 = theme.palette.primary.main,
+			BorderSizePixel = 0,
+			ClipsDescendants = true,
+		},
+		image = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		text = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = math.max(12, size * 0.4),
+			TextColor3 = theme.palette.primary.on,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+	})
+end)
+local default = useAvatarStyles
+return {
+	default = default,
+}

package/out/ui/packages/avatar/components/avatarText.d.ts

@@ -0,0 +1 @@
+export declare function avatarInitials(name: string): string;

package/out/ui/packages/avatar/components/avatarText.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local function avatarInitials(name)
+	local result = ""
+	for _, word in string.split(name, " ") do
+		if #word == 0 then
+			continue
+		end
+		result ..= string.upper(string.sub(word, 1, 1))
+		if #result == 2 then
+			break
+		end
+	end
+	return result
+end
+return {
+	avatarInitials = avatarInitials,
+}

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

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./components/Avatar";
+export { AvatarProps } from "./components/Avatar";
+export { avatarInitials } from "./components/avatarText";

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

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

package/out/ui/packages/badge/components/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BadgeProps {
+    count?: number;
+    max?: number;
+    invisible?: boolean;
+    children?: React.ReactNode;
+}
+declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;
+export default Badge;